js脚本实现文件上传 【原生态ajax实现】

需求：通过ajax保存表单，在保存表单成功后调用回调函数上传图片，这里不再使用网络上的上传插件，直接使用javascript进行上传，处理程序(ashx)进行处理，其中涉及到个浏览器的兼容性问题及方法的扩展，通过网上查找资料，写一个相对完整的实现过程

  <input class="input-file" id="fileInput" type="file">

<script type="text/javascript">        $("input[type='file']").change(function () {            uploadAndSubmit();        });        //跨浏览器获取XmlHttpRequest对象        function AjaxXmlHttpRequest() {            var xmlHttp;            try {                // Firefox, Opera 8.0+, Safari                xmlHttp = new XMLHttpRequest();            }            catch (e) {                // Internet Explorer                try {                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");                }                catch (e) {                    try {                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                    }                    catch (e) {                        alert("您的浏览器不支持AJAX！");                        return false;                    }                }            }            return xmlHttp;        }        function uploadAndSubmit() {            var fls = $("input[type='file']")[0].files;            if (fls.length > 0) {                // 寻找表单域中的 <input type="file" ... /> 标签                var file = fls[0];                // try sending                 var reader = new FileReader();                reader.onloadstart = function () {                    // 这个事件在读取开始时触发                    console.log("onloadstart");                   // document.getElementById("bytesTotal").textContent = file.size;                }                reader.onprogress = function (p) {                    // 这个事件在读取进行中定时触发                    console.log("onprogress");                   // document.getElementById("bytesRead").textContent = p.loaded;                }                reader.onload = function () {                    // 这个事件在读取成功结束后触发                    console.log("load complete");                }                reader.onloadend = function () {                    // 这个事件在读取结束后，无论成功或者失败都会触发                    if (reader.error) {                        console.log(reader.error);                    } else {                        // document.getElementById("bytesRead").textContent = file.size;                        // 构造 XMLHttpRequest 对象，发送文件 Binary 数据                        // var xhr = new XMLHttpRequest();                        var xhr = new AjaxXmlHttpRequest();                        xhr.open("POST", "../ajax/DealHtml.ashx?type=file&fileName=" + file.name);                        xhr.overrideMimeType("application/octet-stream");                        //参考网页  http://royaltutorials.com/object-has-no-method-sendasbinary/                          //大概意思是，chrome浏览器下面的XMLHttpRequest没有sendAsBinary,所以就自己给XMLHttpRequest原型定义一个这样的属性，并且这个属性是一个方法                          if (!XMLHttpRequest.prototype.sendAsBinary) {//如果XMLHttpRequest没有sendAsBinary                              XMLHttpRequest.prototype.sendAsBinary = function (datastr) {                                function byteValue(x) {                                    return x.charCodeAt(0) & 0xff;                                }                                var ords = Array.prototype.map.call(datastr, byteValue);                                var ui8a = new Uint8Array(ords);                                this.send(ui8a.buffer);                            };                        }                        xhr.sendAsBinary(reader.result);                        xhr.onreadystatechange = function () {                            if (xhr.readyState == 4) {                                if (xhr.status == 200) {                                    console.log("upload complete");                                    console.log("response: " + xhr.responseText);                                    if (xhr.responseText == "上传成功") { alert('保存成功'); }                                }                            }                        }                    }                }                //reader.readAsBinaryString(file);                // Read in the XLSX file in Binary Mode.                   //reader.readAsBinaryString(f);//<-- ***does not work if this method is used in IE10 (10.0.9200.16540C0), but works on Chrome***                   reader.readAsText(file); //<-- ***Works on both Chrome & IE10 (10.0.9200.16540C0)**            } else {                alert("Please choose a file.");            }        }    </script> 

后台处理代码：