當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
简单的使用JS读取本地的文件
生活随笔
收集整理的這篇文章主要介紹了
简单的使用JS读取本地的文件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>點(diǎn)名</title></head><script type="text/javascript">var arr = new Array();var temp_str ="0";var i = 0;function showPreview(source){var input = source;var reader = new FileReader();reader.readAsText(input.files[0]);reader.onload = function() {if(reader.result) {//顯示文件內(nèi)容temp_str = reader.result;}};}function getDname(){if(temp_str=="0"){alert("請(qǐng)先上傳文件");}else{var temp = Math.random()*arr.length;arr = temp_str.split(" ");document.getElementById("text").value=arr[Math.floor(temp)];}}</script><body><div id="div" align="center" style="width: 300px;height: 300px; background-color: #FDEF85; margin: auto;"><br><input type="file" name="file" value="上傳文件" onchange="showPreview(this)" /><br><br><br><br><input type="text" id="text" disabled="false"><br><br><input type="button" value="開始點(diǎn)名" onclick="getDname()"></div></body>
</html>
var reader = new FileReader();
reader.readAsDataURL(inputBox.files[0]);//發(fā)起異步請(qǐng)求
reader.onload = function(){//讀取完成后，數(shù)據(jù)保存在對(duì)象的result屬性中console.log(this.result)
}
使用JS 讀取文件
H5處于安全考慮不建議是使用JS上傳文件，一般使用JS進(jìn)行文件預(yù)覽以確定格式是否正確再上傳到服務(wù)器。
H5提供了FileReader()方法，以供對(duì)文件進(jìn)行操作，但都是異步請(qǐng)求要注意
| readAsArrayBuffer(file) | 按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對(duì)象表示 |
| readAsBinaryString(file) | 按字節(jié)讀取文件內(nèi)容，結(jié)果為文件的二進(jìn)制串 |
| readAsDataURL(file) | 讀取文件內(nèi)容，結(jié)果用data:url的字符串形式表示 |
| readAsText(file,encoding) | 按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示 |
| abort() | 終止文件讀取操作 |
同時(shí)還提供了文件讀取的不同狀態(tài)的方法
| onabort | 當(dāng)讀取操作被中止時(shí)調(diào)用 |
| onerror | 當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用 |
| onload | 當(dāng)讀取操作成功完成時(shí)調(diào)用 |
| onloadend | 當(dāng)讀取操作完成時(shí)調(diào)用，無(wú)論成功或失敗 |
| onloadstart | 當(dāng)讀取操作開始時(shí)調(diào)用 |
| onprogress | 在讀取數(shù)據(jù)過程中周期性調(diào)用 |
在html中提供的了file的type來(lái)選擇本地文件
<input type="file" name="file" value="上傳文件" onchange="showPreview(this)" />傳遞參數(shù)使用this就可以傳遞文件
總結(jié)
以上是生活随笔為你收集整理的简单的使用JS读取本地的文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu 下 php 安装 zip
- 下一篇： JavaScript怎样读取本地Exce