JS读取文件且AJAX传输到后台

前端JS只允许读取文件,出于安全考虑JS并不允许修改、删除本地文件。那么JS如何读取选择的文件内容呢?

JS读取文件的关键代码或步骤:this.filesnew FileReader()readAsTextthis.resultnew XMLHttpRequest()

选择文件后的效果截图
选择文件后的效果截图

HTML代码

  1. <input type="file" multiple="multiple" id="mySelect"> 

JAVASCRIPT代码

  1. /** 
  2.  * Created by Administrator on 2016-09-28. 
  3.  */ 
  4.  
  5. document.getElementById('mySelect').onchange = function(){ 
  6.     //var file = $(this).prop('files')[0]; //Blob二进制对象 
  7.     var file = this.files[0]; 
  8.     if(file){ 
  9.         var reader = new FileReader(); 
  10.         reader.readAsText(file,'GBK');//读取文件内容, 注意编码格式: 如果乱码则换成UTF-8  
  11.         reader.onload = function(e){ 
  12.             var text = this.result; //e.target.result 
  13.             var sDataXHR = { 
  14.                 requestURL:'/api/upload'
  15.                 requestMethod:'POST'
  16.                 requestData:text, 
  17.                 succeedHtml:''
  18.                 failedHtml:'' 
  19.             }; 
  20.             XMLHttpRequestFn(sDataXHR); //向后台发送 
  21.         } 
  22.     } 
  23. }; 
  24.  
  25. function XMLHttpRequestFn(sData){ 
  26.     var requestMethod = sData.requestMethod, //POST、GET.. 
  27.         requestURL = sData.requestURL, //请求的地址 
  28.         requestData = sData.requestData, //待发送的数据 
  29.         succeedHtml = sData.succeedHtml, //成功提示信息 
  30.         failedHtml = sData.failedHtml; //失败提示信息 
  31.  
  32.     var xhr = new XMLHttpRequest(); 
  33.     //var xhr = new ActiveXObject("Microsoft.XMLHTTP");//针对IE5、IE6 
  34.     xhr.open(requestMethod, requestURL,true); 
  35.     xhr.overrideMimeType("application/octet-stream"); //数据以流的形式上传(非必须) 
  36.     xhr.send(requestData); 
  37.     xhr.onreadystatechange = stateChangeFn; 
  38.  
  39.     function stateChangeFn(){ 
  40.         if(xhr.readyState == 4){ //0->1->2->3->4的过程 
  41.             if(xhr.status == 200){ //不管是GET还是POST都返回200 
  42.                 //console.log(xhr.response);//{"code":1,"message":""} 
  43.                 if(succeedHtml) 
  44.                     AjaxDialogTips(succeedHtml,0,3); 
  45.             }else
  46.                 if(failedHtml) 
  47.                     AjaxDialogTips(failedHtml,3,3); 
  48.             } 
  49.         } 
  50.     } 

什么是XMLHttpRequest?

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出POSTHEAD请求以及普通的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对象的返回值:

  1. onabort: null 
  2. onerror: null 
  3. onload: null 
  4. onloadend: null 
  5. onloadstart: null 
  6. onprogress: null 
  7. onreadystatechange: null 
  8. ontimeout: null 
  9. readyState: 4 
  10. response: "{"code":1,"message":""}" 
  11. responseText: "{"code":1,"message":""}" 
  12. responseType: "" 
  13. responseURL: "http://rd.drugcloud.net/api/mi/druginfo/upload" 
  14. responseXML: null 
  15. status: 200 
  16. statusText: "OK" 
  17. timeout: 0 

 

 

相关经验

导读书签
书签初始化中…