本文實例為大家分享了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.圖片測試

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html5 txt文件上传,JavaScript html5利用FileReader实现上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。