提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript结合fileReader实现上传图片

JavaScript上传 实现 图片 结合 FileReader
2023-06-13 09:15:43 时间

关于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实现上传图片的关键性代码了，小伙伴们喜欢吗？

相关文章