一文讲解ajax实现无刷新上传和下载（代码详解）

之前的文章《一招教你怎么使用window挂载EFI分区（附代码）》中，给大家介绍了怎么使用window挂载EFI分区。下面本篇文章给大家了解ajax实现无刷新上传和下载，有需要的朋友可以参考一下，希望对你们有所助。

关于ajax无刷新上传和下载

这是一个没什么含量但是又用的比较多又不得不说的问题，其实真的不想说，因为没什么好说的。

关于上传

使用Flash, ActiveX上传 ，略...

自己写XMLHttPRequest

// 准备FormDataVAR formData = new FormData();
    formData.apPEnd("key", value);
    // 创建xhr对象var xhr = new XMLHttpRequest();
// 监听状态，实时响应// xhr 和 xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度xhr.upload.onprogress = function (event) {
  if (event.lengthComputable) {
        var percent = Math.round(event.loaded / event.total);
        console.LOG("%d%", percent);
  }
}
    ;
// 传输开始事件xhr.onloadstart = function (event) {
      console.log("load start");
}
    ;
// ajax过程成功完成事件xhr.onload = function (event) {
      console.log("load success");
      console.log(xhr.responseText);
      var ret = JSON.parse(xhr.responseText);
      console.log(ret);
}
    ;
// ajax过程发生错误事件xhr.onerror = function (event) {
      console.log("error");
}
    ;
// ajax被取消xhr.onabort = function (event) {
      console.log("abort");
}
    ;
// loadend传输结束，不管成功失败都会被触发xhr.onloadend = function (event) {
      console.log("load end");
}
    ;
    // 发起ajax请求传送数据xhr.open("POST", "/upload", true);
    xhr.send(formData);
    

使用jquery

var formData = new FormData();
    formData.append("key", value);
 //传的参和值$.ajax({
  url: "XXX",  type: "POST",  data: formData,  contentType: false,  proceSSData: false,  success: function (res) {
}
,  error: function () {
}
,}
    );
    

这里要说的就是formData，这个狗屎在IE10之后才开始完整的支持，IE9吖的是个半残品。所以这要说的是第三种结合form和iframe来实现，原理：

隐藏的form和iframe，form的target指向iframe，监听iframe load，来获取上传结果。

优点：兼容该死的ie低版本浏览器

缺点：跨域上传不支持，还需自定义反向代理，因为iframe onload不支持跨域

上传接口API： 成功返回：

{
  code: 1,  msg: '上传成功'}
    

失败返回：

{
  code: 0,  msg: '上传失败'}
    

HTML：

form  action="xxxx"  target="upload"  enctype="multipart/form-data"  method="post"  style="display:none;
     ">
      ... ../form>
    iframe name="upload" id="upload">
    /iframe>
    !-- JS: -->
    script>
      var fm = document.getElementById("upload");
  var load = function () {
        var doc = fm.contentWindow || fm.contentDocument;
        if (doc.document) doc = doc.document;
        var content = doc.body.textContent;
     //此处的值取决与API 接口返回的值    var data = JSON.parse(content);
        console.log(content);
  }
    ;
      // 兼容低版本浏览器监听判断  fm.attachEvent ? fm.attachEvent("onload", load) : (fm.onload = load);
    /script>
    

关于下载：

暴力一点的下载直接

window.open("/rest/donwload/abcd.do");
    

优点：代码量少。

缺点：现代浏览器会自动识别文件类型，如pDF，会自动在浏览器打开

优雅一点的下载：

function download() {
      var a = document.createElement("a");
      var url = "download/?filename=aaa.txt";
      var filename = "data.xlsx";
      a.href = url;
      a.download = filename;
      a.click();
}
    

优点：解决了暴力下载自动打开文件的缺陷

缺点：不支持post方式下载

使用XMLHttpRequest，BLOB方式

function download() {
      var url = "download/?filename=aaa.txt";
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
     // 也可以使用POST方式，根据接口  xhr.responseType = "blob";
 // 返回类型blob  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑  xhr.onload = function () {
    // 请求完成    if (this.status === 200) {
          // 返回200      var blob = this.response;
          var reader = new FileReader();
          reader.readAsDataURL(blob);
 // 转换为base64，可以直接放入a表情href      reader.onload = function (e) {
            // 转换完成，创建一个a标签用于下载        var a = document.createElement("a");
            a.download = "data.xlsx";
            a.href = e.target.result;
            $("body").append(a);
     // 修复firefox中无法触发click        a.click();
            $(a).remove();
      }
    ;
    }
  }
    ;
      // 发送ajax请求  xhr.send();
}
    

优点：支持post方式

缺点：还是该死的兼容性问题

所以处理兼容性最好的方式 还是form结合iframe（不考虑兼容性当然还是XMLHttpRequest最好），这种方式不论是上传和下载 都是完美支持的。上传下载通用。

最好的上传下载方式： 你们的Boss不要求兼容ie低版本浏览器

[完]

推荐学习：AJAX视频教程

以上就是一文讲解ajax实现无刷新上传和下载（代码详解）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！