HTML5 檔案域+FileReader 讀取檔案(二)
阿新 • • 發佈:2018-12-17
一、讀取文字檔案內容,指定字元編碼
<div class="container"> <!--文字檔案驗證--> <input type="file" id="file" multiple accept="text/plain" /> <input type="button" id="btn1" value="讀取檔案內容" onclick="showFiles();" /> <h4>選擇檔案如下:</h4> <blockquote></blockquote> </div>
js:
//讀取文字檔案例項 var fileBox = document.getElementById('file'); function showFiles() { //獲取選擇檔案的陣列 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; readFile(file); } } //讀取檔案內容 functionreadFile(file) { var reader = new FileReader(); //中文windows系統 txt 文字多數預設編碼 gbk reader.readAsText(file, 'gbk'); reader.onload = function (e) { var result = reader.result; $('.container blockquote').text(result); } }
二、讀取或預覽客戶圖片
<div class="container"> <!--圖片型別驗證方法1--> <input type="file" id="file" multiple accept="image/*" /> <input type="button" id="btn1" value="選擇上傳檔案" onclick="showFiles();" /> <h4>選擇檔案如下:</h4> <img src="" id="img1" /> </div>
JS:
//讀取圖片例項 var fileBox = document.getElementById('file'); function showFiles() { //獲取選擇檔案的陣列 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; //圖片型別驗證第二種方式 if (/image\/\w+/.test(file.type)) readFile(file); else console.log(file.name + ':不是圖片'); } } //讀取圖片內容 為DataURL //reader.readAsDataURL function readFile(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var result = reader.result; $('.container blockquote').text(result); $('#img1').attr('src', result) } }