<!DOCTYPE html>
<html>
<head>
<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>
分享到：
相关推荐
html上传视频文件video预览（不支持多文件预览，在ie及火狐下测试好使，其他游览未测试，纯js 不用引入插件 ）
html5上传视频和图片 可预览上传，支持多文件上传， HTML5+js 文件想小，简单好用。后端结合PHP等语言。
HTML5多文件上传带预览效果源码下载 HTML5多文件上传带预览效果源码下载
jQuery+HTML5实现图片上传前预览效果，代码简洁，方便使用。
html多图片上传并在线预览 用javascript实现
HTML5 图片上传 带预览功能 (pc,手机都能适配) 支持预览 适配各种机型 HTML5 图片上传 带预览功能 (pc,手机都能适配) 支持预览 适配各种机型
html5多图片上传，可显示多图上传之后的预览效果。
Html5上传图片前生成本地预览，可以在本地预览图片，再上传到服务器
html5图片上传插件预览图片尺寸大小上传代码html5图片上传插件预览图片尺寸大小上传代码
jqeury html5实现的文件上传预览功能,jqeury html5实现的文件上传预览功能,
html5图片上传本地生成缩略图预览
html5实现多图片上传预览（源码，已测试）
由html5实现的文件上传预览功能，需要上传功能的快来看看吧，也许对你有用
HTML5实现多文件图片预览上传实例代码 HTML5实现多文件图片预览上传实例代码
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
input file上传图片预览
javascript+html头像上传预览，显示圆形头像预览。