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>複製代碼