javascript结合fileReader 实现上传图片
关于FileAPI这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过FileReader接口,我们可以异步地将文件内容加载到内存中,赋予某个js变量。
functiongetImgSrc(target,callback){ if(window.FileReader){ varoPreviewImg=null,oFReader=newwindow.FileReader(); oFReader.onload=function(oFREvent){ oPreviewImg=newImage(); vartype=target.files[0].type.split("/")[1]; varsrc=oFREvent.target.result; oPreviewImg.src=src; if(typeofcallback=="function"){ callback(oPreviewImg,target,type,src); } returnoPreviewImg.src; }; return(function(){ varaFiles=target.files; if(aFiles.length===0){ return; } if(!IsImgType(aFiles[0].type)){ alert("Youmustselectavalidimagefile!"); return; } if(aFiles[0].size>1024*1024){ target.value=""; alert('Pleaseuploadimagefilesizelessthan1M.'); return; } oFReader.readAsDataURL(aFiles[0]); })(); } if(navigator.appName==="MicrosoftInternetExplorer"){ return(function(){ document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=target.value; })(); } }
以上就是javascript结合fileReader实现上传图片的关键性代码了,小伙伴们喜欢吗?