ajax 上传文件下载文件

时间 2019-11-08

标签 ajax 上传文件下载栏目 Ajax 繁體版

原文原文链接

场景：使用ajax先上传excel文件，再下载接口返回的文件流。用传统表单也能够，使用ajax是为了能够设置超时时间。另外，jquery的ajax封装的是XMLHttpRequest一级，不支持处理文件流，因此使用原生的XMLHttpRequest二级对象。

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据获取</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <style>* { margin: 0; padding: 0;} body { height: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 14px; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; } button, input, optgroup, select, textarea { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; } #container { margin: 100px auto; width: 500px; } .item { margin-bottom: 30px; }</style></head>
  
  <body>
    <div id="container">
      <form id="form" action="/" enctype="multipart/form-data">
        <div class="item">
          <label for="startDate">开始日期：</label>
          <input type="date" name="startDate" id="startDate" /></div>
        <div class="item">
          <label for="endDate">结束日期：</label>
          <input type="date" name="endDate" id="endDate" /></div>
        <div class="item">
          <input type="file" id="file" name="myfile" />
          <input type="button" onclick="UpladFile()" value="上传" /></div>
      </form>
    </div>
    <script type="text/javascript">function UpladFile() {
        var apiUrl = "http://192.168.50.170:3000/data"; // 接口地址
        var formData = new FormData();

        formData.append('fileUpload', $('#file')[0].files[0]); // 文件
        formData.append('startDate', $('#startDate').val()); // 其余表单数据
        formData.append('endDate', $('#endDate').val()); // 其余表单数据

        getAjax('POST', apiUrl, formData)
      }

      function getAjax(method, apiUrl, options, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, apiUrl, 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();
            }
          }
        };
        xhr.timeout = 1000 * 60 * 60 * 24; //将超时时间设置为1天
        xhr.ontimeout = function() { //请求终止时，会执行ontimeout事件处理程序
          alert('timeout!')
        }
        // 发送ajax请求
        xhr.send(options)
      }</script>
  </body>

</html>复制代码