基于jquery实现图片上传本地预览功能
当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的，如果网速慢或图片有问题，这样不但浪费客户时间同时也浪费服务器资源了，下面我们介绍利用js上传图片时本地实现预览，希望此方法对各位有所帮助哦。
一、原理
分为两步：
当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL（对象URL）；
把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。
在这里，我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。
1、File对象
File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的DataTransfer对象.
下面来看获取FileList对象：
<scripttype="text/javascript"src="jquery.js"></script>
<inputid="upload"type="file">
<imgid="preview"src="">
<scripttype="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：
<scripttype="text/javascript">
varf=document.getelementbyid('upload').files[0];
varsrc=window.URL.createObjectURL(f);
document.getElementById('preview').src=src;
</script>
一个比较完整的实例
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>HTML5Upload</title>
<styletype="text/css">
#destination{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
}
</style>
<!--<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<scripttype="text/javascript"src="http://localhost/jQuery/jquery.js"></script>
<scripttype="text/javascript">
//处理fileinput加载的图片文件
$(document).ready(function(e){
//判断浏览器是否有FileReader接口
if(typeofFileReader=='undefined')
{
$("#destination").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
//如果浏览器是ie
if($.browser.msie===true)
{
//ie6直接用fileinput的value值本地预览
if($.browser.version==6)
{
$("#imgUpload").change(function(event){
//ie6下怎么做图片格式判断?
varsrc=event.target.value;
//varsrc=document.selection.createRange().text;//选中后selection对象就产生了这个对象只适合ie
varimg='<imgsrc="'+src+'"width="200px"height="200px"/>';
$("#destination").empty().append(img);
});
}
//ie7,8使用滤镜本地预览
elseif($.browser.version==7||$.browser.version==8)
{
$("#imgUpload").change(function(event){
$(event.target).select();
varsrc=document.selection.createRange().text;
vardom=document.getElementById('destination');
//使用滤镜成功率高
dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src=src;
dom.innerHTML='';
//使用和ie6相同的方式设置src为绝对路径的方式有些图片无法显示效果没有使用滤镜好
/*varimg='<imgsrc="'+src+'"width="200px"height="200px"/>';
$("#destination").empty().append(img);*/
});
}
}
//如果是不支持FileReader接口的低版本firefox可以用getAsDataURL接口
elseif($.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(vari=0;i<event.target.files.length;i++)
{
varimg='<imgsrc="'+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
{
//version1
/*$("#imgUpload").change(function(e){
varfile=e.target.files[0];
varfReader=newFileReader();
//console.log(fReader);
//console.log(file);
fReader.onload=(function(var_file)
{
returnfunction(e)
{
$("#imgPreview").attr({'src':e.target.result,'alt':var_file.name});
}
})(file);
fReader.readAsDataURL(file);
});*/
//单图上传version2
/*$("#imgUpload").change(function(e){
varfile=e.target.files[0];
varreader=newFileReader();
reader.onload=function(e){
//displayImage($('bd'),e.target.result);
//alert('load');
$("#imgPreview").attr({'src':e.target.result});
}
reader.readAsDataURL(file);
});*/
//多图上传inputfile控件里指定multiple属性e.target是dom类型
$("#imgUpload").change(function(e){
for(vari=0;i<e.target.files.length;i++)
{
varfile=e.target.files.item(i);
//允许文件MIME类型也可以在input标签中指定accept属性
//console.log(/^image/.*$/i.test(file.type));
if(!(/^image/.*$/i.test(file.type)))
{
continue;//不是图片就跳出这一次循环
}
//实例化FileReaderAPI
varfreader=newFileReader();
freader.readAsDataURL(file);
freader.onload=function(e)
{
varimg='<imgsrc="'+e.target.result+'"width="200px"height="200px"/>';
$("#destination").empty().append(img);
}
}
});
//处理图片拖拽的代码
vardestDom=document.getElementById('destination');
destDom.addEventListener('dragover',function(event){
event.stopPropagation();
event.preventDefault();
},false);
destDom.addEventListener('drop',function(event){
event.stopPropagation();
event.preventDefault();
varimg_file=event.dataTransfer.files.item(0);//获取拖拽过来的文件信息暂时取一个
//console.log(event.dataTransfer.files.item(0).type);
if(!(/^image/.*$/.test(img_file.type)))
{
alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
returnfalse;
}
fReader=newFileReader();
fReader.readAsDataURL(img_file);
fReader.onload=function(event){
destDom.innerHTML='';
destDom.innerHTML='<imgsrc="'+event.target.result+'"width="200px"height="200px"/>';
};
},false);
}
});
</script>
</head>
<body>
<inputtype="file"id="imgUpload"name="imgUpload"draggable="true"single/><!--允许file控件接受的文件类型-->
<!--<inputtype="file"id="imgUpload"name="imgUpload"accept="image/*"multiple/>-->
<divid="destination"style="width:200px;height:200px;border:1pxsolid#000000;"><imgsrc="nopic.jpg"/></div>
</body>
</html>
二、兼容性
- •上述方法适用于chrome浏览器
- •如果是IE浏览器可以直接使用input的value来代替src
- •网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的，现在这个方法都已经废除，类似的还有getAsText()和getAsBinary()方法；
以上就是本文的全部内容，希望对大家的学习有所帮助。