HTML5 上传前预览详解编程语言
2023-06-13 09:20:28 时间
title HTML5上传图片预览 /title
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" /script
/head
body
h3 请选择图片文件:JPG/GIF /h3
form name="form0" id="form0"
input type="file" name="file0" id="file0" multiple="multiple" / br img src="" id="img0"
/form
script
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
return url ;
/script
/body
/html
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/10092.html
cjava相关文章
- 命令行上传文件并分享服务合集
- Java文件上传详解
- Linux下终端实现文件上传与反弹
- servlet实现文件上传数据增删该查详解编程语言
- uploadify多文件上传参数设置详解编程语言
- 集结 HTML5 与 MySQL,搭建无可抵挡的猛力!(html5与mysql)
- 上传文件至Linux系统:简易指南(上传文件到linux系统)
- 兼容性探究HTML5与Linux的兼容性(html5与linux)
- HTML5与Oracle结合,展现出更多可能(html5 oracle)
- MySQL上传数据后如何获取返回值(mysql上传数据返回)
- asp.net下文件上传和文件删除的代码
- asp.net上传图片并同时生成缩略图的代码
- FineUploader文件上传组件应用介绍