基于jquery实现图片上传本地预览功能

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

基于jquery实现图⽚上传本地预览功能
当我们在上传⽂件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的，如果⽹速慢或图⽚有问题，这样不但浪费客户时间同时也浪费服务器资源了，下⾯我们介绍利⽤js上传图⽚时本地实现预览，希望此⽅法对各位有所帮助哦。

⼀、原理
分为两步：
当上传图⽚的input被触发并选择本地图⽚之后获取要上传的图⽚这个对象的URL（对象URL）；
把对象URL赋值给事先写好的img标签的src属性即可把图⽚显⽰出来。

在这⾥，我们需要了解Javascript⾥File对象、Blob对象和window.URL.createObjectURL()⽅法。

1、File对象
File对象可以⽤来获取某个⽂件的信息,还可以⽤来读取这个⽂件的内容.通常情况下,File对象是来⾃⽤户在⼀个input元素上选择⽂件后返回的FileList对象,也可以是来⾃由拖放操作⽣成的 DataTransfer对象.
下⾯来看获取FileList对象：
<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第⼀个元素
alert(document.getelementbyid('upload').files[0]);
});
</script>
2、Blob对象
⼀个Blob对象就是⼀个包含有只读原始数据的类⽂件对象.Blob对象中的数据并不⼀定得是JavaScript中的原⽣形式.File接⼝基于Blob,继承了Blob的功能,并且扩展⽀持了⽤户计算机上的本地⽂件.
我们想要得到的对象URL实际上就是从Blob这个对象获取的，因为File的接⼝继承Blob。

下⾯就来把Blob对象转换成URL：
<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>
⼀个⽐较完整的实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<style type="text/css">
#destination{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
}
</style>

<script type="text/javascript" src="http://localhost/jQuery/jquery.js"></script>
<script type="text/javascript">
//处理file input加载的图⽚⽂件
$(document).ready(function(e) {
//判断浏览器是否有FileReader接⼝
if(typeof FileReader =='undefined')
{
$("#destination").css({'background':'none'}).html('亲,您的浏览器还不⽀持HTML5的FileReader接⼝,⽆法使⽤图⽚本地预览,请更新浏览器获得最好体验'); //如果浏览器是ie
if($.browser.msie===true)
{
//ie6直接⽤file input的value值本地预览
if($.browser.version==6)
{
$("#imgUpload").change(function(event){
//ie6下怎么做图⽚格式判断?
var src = event.target.value;
//var src = document.selection.createRange().text; //选中后 selection对象就产⽣了这个对象只适合ie
var img = '<img src="'+src+'" width="200px" height="200px" />';
$("#destination").empty().append(img);
});
}
//ie7,8使⽤滤镜本地预览
else if($.browser.version==7 || $.browser.version==8)
{
$("#imgUpload").change(function(event){
$(event.target).select();
var src = document.selection.createRange().text;
var dom = document.getElementById('destination');
//使⽤滤镜成功率⾼
dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;
dom.innerHTML = '';
//使⽤和ie6相同的⽅式设置src为绝对路径的⽅式有些图⽚⽆法显⽰效果没有使⽤滤镜好
/*var img = '<img src="'+src+'" width="200px" height="200px" />';
$("#destination").empty().append(img);*/
});
}
}
//如果是不⽀持FileReader接⼝的低版本firefox 可以⽤getAsDataURL接⼝
else if($.browser.mozilla===true)
{
$("#imgUpload").change(function(event){
//firefox2.0没有event.target.files这个属性就像ie6那样使⽤value值但是firefox2.0不⽀持绝对路径嵌⼊图⽚放弃firefox2.0
//firefox3.0开始具备event.target.files这个属性并且开始⽀持getAsDataURL()这个接⼝⼀直到firefox7.0结束不过以后都可以⽤HTML5的FileReader接⼝了 if(event.target.files)
{
//console.log(event.target.files);
for(var i=0;i<event.target.files.length;i++)
{
var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>';
$("#destination").empty().append(img);
}
}
else
{
//console.log(event.target.value);
//$("#imgPreview").attr({'src':event.target.value});
}
});
}
}
else
{
// version 1
/*$("#imgUpload").change(function(e){
var file = e.target.files[0];
var fReader = new FileReader();
//console.log(fReader);
//console.log(file);
fReader.onload=(function(var_file)
{
return function(e)
{
$("#imgPreview").attr({'src':e.target.result,'alt':var_});
}
})(file);
fReader.readAsDataURL(file);
});*/
//单图上传 version 2
/*$("#imgUpload").change(function(e){
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e){
//displayImage($('bd'),e.target.result);
//alert('load');
$("#imgPreview").attr({'src':e.target.result});
}
reader.readAsDataURL(file);
});*/
//多图上传 input file控件⾥指定multiple属性 e.target是dom类型
$("#imgUpload").change(function(e){
for(var i=0;i<e.target.files.length;i++)
{
var file = e.target.files.item(i);
//允许⽂件MIME类型也可以在input标签中指定accept属性
//console.log(/^image/.*$/i.test(file.type));
if(!(/^image/.*$/i.test(file.type)))
{
continue; //不是图⽚就跳出这⼀次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload=function(e)
{
var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';
$("#destination").empty().append(img);
}
}
});
//处理图⽚拖拽的代码
var destDom = document.getElementById('destination');
destDom.addEventListener('dragover',function(event){
event.stopPropagation();
event.preventDefault();
},false);
destDom.addEventListener('drop',function(event){
event.stopPropagation();
event.preventDefault();
var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的⽂件信息暂时取⼀个
//console.log(event.dataTransfer.files.item(0).type);
if(!(/^image/.*$/.test(img_file.type)))
{
alert('您还未拖拽任何图⽚过来,或者您拖拽的不是图⽚⽂件');
return false;
}
fReader = new FileReader();
fReader.readAsDataURL(img_file);
fReader.onload = function(event){
destDom.innerHTML='';
destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>';
};
},false);
}
});
</script>
</head>
<body>
<input type="file" id="imgUpload" name="imgUpload" draggable="true" single/> 

<div id="destination" style="width:200px;height:200px;border:1px solid #000000;"><img src="nopic.jpg" /></div>
</body>
</html>
⼆、兼容性
•上述⽅法适⽤于chrome浏览器
•如果是IE浏览器可以直接使⽤input的value来代替src
•⽹上查看资料有直接使⽤File对象的getAsDataURL()⽅法获取URL的，现在这个⽅法都已经废除，类似的还有getAsText()和getAsBinary()⽅法；
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。