本文实例为大家分享了H5利用FileReader上传文件的具体代码，供大家参考，具体内容如下

1. Html部分

文件上传演练

Browse...

2. JS部分

var result = document.getElementById("result");

var input = document.getElementById("file_input");

var inResult = document.getElementById('inResult');

if(typeof FileReader === 'undefined'){

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 = ''; //显示图片

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.图片测试

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。