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