JS读取文件且AJAX传输到**

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二进制对象 
    var file = this.files[0]; 
    if(file){ 
        var reader = new FileReader(); 
        reader.readAsText(file,'GBK');//读取文件内容， 注意编码格式： 如果乱码则换成UTF-8  
        reader.onload = function(e){ 
            var text = this.result; //e.target.result 
            var sDataXHR = { 
                requestURL:'/api/upload', 
                requestMethod:'POST', 
                requestData:text, 
                succeedHtml:'', 
                failedHtml:'' 
            }; 
            XMLHttpRequestFn(sDataXHR); //向**发送 
        } 
    } 
}; 
 
function XMLHttpRequestFn(sData){ 
    var requestMethod = sData.requestMethod, //POST、GET.. 
        requestURL = sData.requestURL, //请求的地址 
        requestData = sData.requestData, //待发送的数据 
        succeedHtml = sData.succeedHtml, //成功提示信息 
        failedHtml = sData.failedHtml; //失败提示信息 
 
    var xhr = new XMLHttpRequest(); 
    //var xhr = new ActiveXObject("Microsoft.XMLHTTP");//针对IE5、IE6 
    xhr.open(requestMethod, requestURL,true); 
    xhr.overrideMimeType("application/octet-stream"); //数据以流的形式上传（非必须） 
    xhr.send(requestData); 
    xhr.onreadystatechange = stateChangeFn; 
 
    function stateChangeFn(){ 
        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 

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。