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