本文實例為大家分享了H5利用FileReader上傳文件的具體代碼,供大家參考,具體內容如下
1. Html部分
<h2>文件上傳演練</h2> <div id="result"> <!-- 這里用來顯示讀取結果 --> <div id="inResult"> <div id="inImgs"></div> <div id="imgInfo"></div> </div> </div> <input type="text" id="txtImgSrc" /><!--顯示圖片信息--> <input type="button" id="btnRemove" /> <button id="btnBrowse" onClick="onFile()">Browse...</button> <input type="file" id="file_input" />
2. JS部分
<script type="text/javascript"> 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(); //打開<input type="file" id="file_input" /> } 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]+"<br/>("+fsize+"kb)"; //顯示圖片名字加圖片大小 } } </script> 3.圖片測試

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答