使用JavaScript的HTTP POST的可下載數據鏈接

Question

我有一個HTTP POST REST終結點，該終結點使用圖像並返回帶有圖像中像素數據的HTML文檔。 HTTP響應包括標頭Content-Disposition：附件； filename = Pixels.html，以便瀏覽器提示下載。

我想要一個HTML / JavaScript（不是jQuery）應用，

允許我瀏覽並選擇圖像（例如， <input id="fid" name="fid" type="file" />
單擊鏈接后，將圖像數據發布到端點，然后讓我將HTML內容下載到磁盤（例如<p onclick="javascript: getPixels()">Get Pixels</p> ）。

我該怎么做呢？ 我嘗試了以下代碼：

  function getPixels() {
     var input = document.getElementById("fid");
     if (input.files && input.files[0]) {
        if (typeof (FileReader) != "undefined") {
           var reader = new FileReader();
           reader.onload = function (e) {
              var imgData = e.target.result;
              var postUrl = "./GetPixelsService.svc/image";
              var xhr = new XMLHttpRequest();
              xhr.open("POST", postUrl);
              xhr.setRequestHeader("Content-Type", "image/png");
              //xhr.onreadystatechange = function () {
              //   if (xhr.readyState === 4) {
              //      var res_display = document.getElementById("results");
              //      res_display.srcdoc = xhr.responseText;
              //   }
              //}
              xhr.send(imgData);
           };
           reader.readAsArrayBuffer(input.files[0]);
        }
     }
  }

以下是調用上述函數的HTML腳本。

  <p>
     Upload the image here:
  </p>
  <input id="fid" name="fid" type="file" />
  <!--<button type="submit" onclick="javascript: getPixels()">Get Pixels</button>-->
  <p onclick="javascript: getPixels()">Get Pixels</p>
  <p />
  <hr />
  <p>
     <img id="img2check" src="" alt="" />
  </p>
  <p />
  <iframe id="results" style="width: 100%; border: 0; height: 400px;" src="javascript:;">
     Your browser does not support iframes.
  </iframe>

我能夠選擇響應並將其顯示在iframe中，但無法讓瀏覽器下載內容。

感謝您的幫助。 我已經看過StackOverflow上的相關問題，但到目前為止沒有任何幫助。

提前致謝。

Answer 1

您不能強制客戶端瀏覽器使用XMLHttpRequest提示保存對話框。

您可以執行以下操作：

1：檢查我對另一個與此類似問題的答案：如何通過javascript ajax獲取pdf文件

2：在服務器上生成文件或創建get類型請求處理程序，並使用download屬性為其提供鏈接。 http://www.w3schools.com/TAgs/att_a_download.asp

3：使用第三方應用程序，例如Downloadify： https ： //github.com/dcneiner/Downloadify

4：還有一種使用Blob ，我還沒有嘗試過，在這里：瀏覽器/ HTML從src =“ data：image / jpeg; base64 ...”強制下載圖像。 這篇文章是關於base64圖像的，但是我認為值得嘗試使用html文件。

Answer 2

感謝er-han，以下代碼實現了目標。

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="utf-8" />
     <title></title>
  </head>
  <body>
     <script type="text/javascript">
        function getPixels() {
           showImage();
           var input = document.getElementById("fid");
           if (input.files && input.files[0]) {
              if (typeof (FileReader) != "undefined") {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    var imgData = e.target.result;
                    var postUrl = "./SimpleService.svc/image";
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", postUrl);
                    xhr.setRequestHeader("Content-Type", "image/png");
                    xhr.onreadystatechange = function () {
                       if (xhr.readyState === 4) {
                          var res_url = URL.createObjectURL(new Blob([xhr.responseText]));
                          var lnk = document.getElementById("dlink");
                          lnk.href = res_url;
                          lnk.style.display = "block";
                       }
                    }
                    xhr.send(imgData);
                 };
                 reader.readAsArrayBuffer(input.files[0]);
              }
           }
        }

        function showImage() {
           var input = document.getElementById("fid");
           if (input.files && input.files[0]) {
              if (typeof (FileReader) != "undefined") {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    var img_display = document.getElementById("img2check");
                    img_display.src = e.target.result;
                 };
                 reader.readAsDataURL(input.files[0]);
              }
           }
        }
     </script>

     <p>
        Upload the image here:
     </p>
     <input id="fid" name="fid" type="file" />
     <p/>
     <button type="submit" onclick="javascript: getPixels()">Upload</button>
     <p />
     <hr />
     <p>
        <img id="img2check" src="" alt="" />
     </p>
     <p />
     <p>
        <a id="dlink" href="#" download="Data.html" style="display: none;">Download data</a>
     </p>
  </body>
  </html>

使用JavaScript的HTTP POST的可下載數據鏈接

問題描述

2 個解決方案

解決方案1
1 2017-01-19 10:44:00

解決方案2
1 已采納 2017-01-19 20:50:37

使用JavaScript的HTTP POST的可下載數據鏈接

問題描述

2 個解決方案

解決方案1 1 2017-01-19 10:44:00

解決方案2 1 已采納 2017-01-19 20:50:37

解決方案1
1 2017-01-19 10:44:00

解決方案2
1 已采納 2017-01-19 20:50:37