国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

JavaScript html5利用FileReader實現上傳功能

2019-11-19 17:21:09
字體:
來源:轉載
供稿:網友

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 渝北区| 荆州市| 获嘉县| 射阳县| 太保市| 自贡市| 玉树县| 铅山县| 莒南县| 贵州省| 潼南县| 灵璧县| 霍州市| 隆子县| 万载县| 肇源县| 五指山市| 衡山县| 冀州市| 英山县| 都安| 郎溪县| 曲靖市| 阿拉善右旗| 大洼县| 缙云县| 准格尔旗| 甘孜| 尼木县| 合川市| 平定县| 西充县| 河曲县| 禄丰县| 治多县| 墨江| 彭水| 奉贤区| 砀山县| 灵丘县| 象州县|