前端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