ajax를 통해 새로 고침 없는 업로드 및 다운로드를 구현하는 방법을 설명하는 기사(자세한 코드 설명)

이전 글 "윈도우를 사용하여 EFI 파티션 마운트하는 방법(코드 포함)"에서 윈도우를 사용하여 EFI 파티션 마운트하는 방법을 소개했습니다. 다음 글은 Ajax로 새로 고침 없는 업로드와 다운로드를 구현하는 방법을 이해하는 데 도움이 될 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

ajax 비새로고침 업로드 및 다운로드에 대하여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吖的是个半残品。所以这要说的是第三种结合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

내용은 적지만 많이 사용되는 질문이라 사실 잘 모르겠습니다. 할 말이 없으니까 말하고 싶다.

업로드 정보

Flash, ActiveX를 사용하여 업로드하세요. 약간...

직접 XMLHttpRequest를 작성하세요🎜rrreee

Jquery 사용

rrreee🎜 여기서 내가 말하는 것은 formData입니다. 이 똥은 IE10 이후에만 완전히 지원되었습니다. IE9는 설익은 제품입니다. 그래서 제가 이야기하고 싶은 것은 form과 iframe을 결합하여 이를 달성하는 세 번째 방법입니다. 원칙은 다음과 같습니다. 🎜🎜Hidden form 및 iframe, form의 target은 iframe을 가리키고 iframe 로드를 수신합니다. 업로드 결과를 얻으려면 🎜🎜장점: ie 하위 버전 브라우저와 호환 가능🎜🎜단점: 교차 도메인 업로드가 지원되지 않으며 역방향 프록시를 사용자 정의해야 합니다. iframe onload가 지원되기 때문입니다. 도메인 간 업로드를 지원하지 않음 도메인 🎜🎜업로드 인터페이스 API: 성공적인 반환: 🎜rrreee🎜실패한 반환: 🎜rrreee🎜HTML:
🎜rrreee

다운로드 정보:

🎜더 폭력적으로 직접 다운로드🎜rrreee🎜장점: 코드가 적습니다. 🎜🎜단점: 최신 브라우저는 pdf와 같은 파일 형식을 자동으로 인식하고 브라우저에서 자동으로 엽니다.🎜🎜우아한 다운로드:🎜rrreee🎜 장점 :과격한 다운로드에서 파일이 자동으로 열리는 결함 해결🎜🎜단점:post 다운로드를 지원하지 않음🎜🎜XMLHttpRequest, BLOB 방식 사용🎜rrreee🎜장점: post 메서드 지원🎜🎜단점: 여전히 호환성 문제가 있습니다🎜🎜그래서 가장 좋은 방법은 호환성 또는 iframe과 결합된 form(호환성에 관계없이 물론 XMLHttpRequest가 가장 좋습니다). 이 방법은 업로드와 다운로드 모두 완벽하게 지원됩니다. . 업로드와 다운로드가 일반적입니다. 🎜🎜업로드 및 다운로드를 위한 가장 좋은 방법: Boss는 ie 낮은 버전의 브라우저와 호환될 필요가 없습니다🎜🎜[끝]🎜🎜추천 학습: 🎜AJAX 비디오 튜토리얼🎜🎜

위 내용은 ajax를 통해 새로 고침 없는 업로드 및 다운로드를 구현하는 방법을 설명하는 기사(자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!