ajax如何实现无刷新上传和下载

发布时间:2021-08-31 10:36:32 作者:小新
来源:亿速云 阅读:112

这篇文章主要介绍了ajax如何实现无刷新上传和下载,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。


关于上传

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

自己写XMLHttpRequest

// 准备FormData
var 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吖的是个半残品。所以这要说的是第三种结合formiframe来实现,原理:

隐藏的formiframeformtarget指向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如何实现无刷新上传和下载”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 无刷新上传图片,ajax 和 iframe
  2. swfupload ajax如何实现无刷新上传图片

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ajax

上一篇:如何通过JavaScript在单击按钮后更改<a>标签的href值

下一篇:Node.js Buffer中的encoding的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》