前端JS只允許讀取文件，出于安全考慮JS并不允許修改、刪除本地文件。那么JS如何讀取選擇的文件內容呢？

標簽： 上傳

JS讀取文件的關鍵代碼或步驟：this.files、new FileReader()、readAsText、this.result、new XMLHttpRequest()

選擇文件后的效果截圖

HTML代碼

JAVASCRIPT代碼

/**

*?Created?by?Administrator?on?2016-09-28.

*/

document.getElementById('mySelect').onchange?=function(){

//var?file?=?$(this).prop('files')[0];?//Blob二進制對象

varfile?=this.files[0];

if(file){

varreader?=newFileReader();

reader.readAsText(file,'GBK');//讀取文件內容，?注意編碼格式：?如果亂碼則換成UTF-8

reader.onload?=?function(e){

vartext?=this.result;//e.target.result

varsDataXHR?=?{

requestURL:'/api/upload',

requestMethod:'POST',

requestData:text,

succeedHtml:'',

failedHtml:''

};

XMLHttpRequestFn(sDataXHR);?//向后臺發送

}

}

};

functionXMLHttpRequestFn(sData){

varrequestMethod?=?sData.requestMethod,//POST、GET..

requestURL?=?sData.requestURL,?//請求的地址

requestData?=?sData.requestData,?//待發送的數據

succeedHtml?=?sData.succeedHtml,?//成功提示信息

failedHtml?=?sData.failedHtml;?//失敗提示信息

varxhr?=newXMLHttpRequest();

//var?xhr?=?new?ActiveXObject("Microsoft.XMLHTTP");//針對IE5、IE6

xhr.open(requestMethod,?requestURL,true);

xhr.overrideMimeType("application/octet-stream");//數據以流的形式上傳(非必須)

xhr.send(requestData);

xhr.onreadystatechange?=?stateChangeFn;

functionstateChangeFn(){

if(xhr.readyState?==?4){//0->1->2->3->4的過程

if(xhr.status?==?200){//不管是GET還是POST都返回200

//console.log(xhr.response);//{"code":1,"message":""}

if(succeedHtml)

AjaxDialogTips(succeedHtml,0,3);

}else{

if(failedHtml)

AjaxDialogTips(failedHtml,3,3);

}

}

}

}

什么是XMLHttpRequest？

XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出POST和HEAD請求以及普通的GET請求的能力。

XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，并且能夠以文本或者一個 DOM 文檔的形式返回內容。

盡管名為 XMLHttpRequest，它并不限于和 XML 文檔一起使用：它可以接收任何形式的文本文檔。

XMLHttpRequest 對象是名為 AJAX 的 Web 應用程序架構的一項關鍵功能。

所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象。

任何 W3C 推薦標準均未規定 XMLHttpRequest 對象,即XMLHttpRequest對象目前還不是W3C的標準，但是 W3C 已經開始了標準化的工作。

有關XMLHttpRequest對象的詳細介紹，大家可以參考W3SCHOOL：http://www.w3school.com.cn/xmldom/dom_http.asp

XMLHttpRequest對象的返回值

輸出XMLHttpRequest對象的返回值：

onabort:null

onerror:?null

onload:?null

onloadend:?null

onloadstart:?null

onprogress:?null

onreadystatechange:?null

ontimeout:?null

readyState:?4

response:?"{"code":1,"message":""}"

responseText:?"{"code":1,"message":""}"

responseType:?""

responseURL:?"http://rd.drugcloud.net/api/mi/druginfo/upload"

responseXML:?null

status:?200

statusText:?"OK"

timeout:?0

總結

以上是生活随笔為你收集整理的file js new 传到后台_JS读取文件且AJAX传输到后台的全部內容，希望文章能夠幫你解決所遇到的問題。

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