使用filereader直接显示读取文件并显示。不用上传就可以使用直接本地显示了
工具/原料
jquery1.8.3
方法/步骤
1、第一步创建html，我们在页面中引入jquery库放置一个文件选择的<inputtype="file"id="file">和一个显示结果的div#image-wrap。<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><inputtype="file"id="file"><divid="image-wrap"></div>
2、第二步我们创建一个jquery插件image-file-visible.js方便我们以后使腩柽鬣盛用//图片显示插件(function($){$.imageFileVisible惺绅寨瞀=function(options){//默认选项 vardefaults={ //包裹图片的元素 wrapSelector:null, //<inputtype=file/>元素 fileSelector:null, width:'100%', height:'auto', errorMessage:"不是图片" }; //Extendourdefaultoptionswiththoseprovided. varopts=$.extend(defaults,options); $(opts.fileSelector).on("change",function(){ varfile=this.files[0]; varimageType=/image.*/; if(file.type.match(imageType)){ varreader=newFileReader(); reader.onload=function(){ varimg=newImage(); img.src=reader.result; $(img).width(opts.width); $(img).height(opts.height); $(opts.wrapSelector).append(img); }; reader.readAsDataURL(file); }else{ alert(opts.errorMessage); } });};})(jQuery);
3、第三步这里是全部的html<html><metacharset="ut酆璁冻嘌f-8">&l墉掠载牿t;title>input标签选择file直接读取本地图片并显示</title><body><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scriptsrc="image-file-visible.js"></script><script>$(document).ready(function(){ //图片显示插件 $.imageFileVisible({wrapSelector:"#image-wrap", fileSelector:"#file", width:100, height:50 });});</script><inputtype="file"id="file"><divid="image-wrap"></div></body></html>