您的位置：首页 > Web前端 > JQuery

jQuery+HTML5实现图片上传前预览效果

2016-12-30 10:13 726 查看

本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下：

这里主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。

具体代码如下：

<!DOCTYPE
html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta
http-equiv="Content-Type"

content="text/html;
charset=UTF-8">
<script
src="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航