本文实例为大家分享了H5利用FileReader上传文件的具体代码，供大家参考，具体内容如下
1. Html部分
文件上传演练
2. JS部分
if(typeof FileReader === 'undefined'){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
function onFile(){
document.getElementById('file_input').click(); //打开
}
result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
function onFile(){
document.getElementById('file_input').click(); //打开
}
function readFile(){
var file = this.files[0];
var fsize = parseInt((file.size)/1024); //计算图片大小，默认是B，转换成KB
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
//alert(this.result);
inImgs.innerHTML = '<img src="'+this.result+'" alt="" width="198px" height="250px" id="img"/>'; //显示图片
var arr = input.value.split('\'); //分割图片路径
document.getElementById('result').style.display="block";
document.getElementById('txtImgSrc').value = arr[arr.length-1]; //取数组最后部分 - 图片名字.jpg
document.getElementById('imgInfo').innerHTML = arr[arr.length-1]+"
("+fsize+"kb)"; //显示图片名字加图片大小
}
}
3.图片测试
原文链接：https://www.f2er.com/js/41152.html