Ajax 調用使用 FTP 加載 Json 文件，需要顯示百分比加載進度條

Question

我正在使用 jQuery ajax 加載保存在 FTP 服務器中的文件。 需要顯示進度加載器中加載的文件百分比。

以前我有 HTTP 請求並使用XMLHttpRequest工作。 下面是有效的代碼。

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total)*100;
            var loadPercent = '<div id="fountainTextG">'+Math.round(percentComplete)+'% complete ..</div>';
            $(".sqlLoading").html(loadPercent).removeClass("hide");
            jsAPP.sqlLoading = true;
        }
      }, false);

      // Download progress
      xhr.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {
          var percentComplete =(evt.loaded / evt.total)*100;
          var loadPercent = '<div id="fountainTextG">'+Math.round(percentComplete)+'% complete ..</div>';
          $(".sqlLoading").html(loadPercent).removeClass("hide");
          jsAPP.sqlLoading = true;
          }
      }, false);

      return xhr;
    },
    type: 'POST',
    url:'ftp://192.168.1.157/pub/1.json',
    dataType: "jsonp",
    jsonpCallback:"abc",
    success: function(obj){
        console.log("File loaded successfully");

    },
    error:function(err,stat,erroT){

        $(".page").html("<div class='data_error'> Sorry! No data available for this city.</div>");
    }
});

但這不適用於 FTP 請求。 有沒有辦法在 FTP 上顯示進度加載器？ 請幫助。

Answer 1

在我嘗試並測試了三種通過 js 訪問文件的方法后，這是我對這個問題的看法。

XMLHttpRequest

• 盡管 XMLHttpRequest 聲明它支持其他協議，但它似乎無法訪問通過 ftp 提供的文件。

• 當我嘗試使用下面的代碼訪問時，我按預期遇到了 CORS 錯誤。

• XMLHttpRequest cannot load ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

• FTP 服務器似乎不提供訪問控制標頭， 帖子也證實了這一點

   testFtpLoad : function(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt", true); xhr.onload = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.error(xhr.statusText); } } }; xhr.onerror = function (e) { console.error(xhr.statusText); }; xhr.send(null); },

錨標簽

如果您使用的是現代瀏覽器，您可以使用下載屬性直接將 ftp 提供給用戶（這是一個簡單的<a>標簽用法），盡管這不是您要找的。

testUsingAnchorTag : function(){
      var $aTag = document.createElement("a");
      $aTag.href =  "ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt";
      $aTag.id = "temporaryDownloadLink";
      $aTag.download = "rfc959.txt";
      document.body.appendChild($aTag);
      $aTag.click();
      setTimeout(function(){
        $('#temporaryDownloadLink').remove();
      }, 1000); 
  }

• 缺點：雖然這會在用戶的計算機上下載文件，但您將無法跟蹤它的進度

文件接口

• 我嘗試使用 FTP URL 訪問該文件，但它抱怨我傳遞的參數。

  var f = new File("ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt", true)

• 即使我要成功地傳遞正確的一組則params的，它會抱怨URL的性質，因為它只能在本所提到希望通過服務器提供服務/從用戶計算機上的路徑后-糾正我，如果我錯了這里。

結論：

• 最后，我想得出結論，可能無法使用 js 從瀏覽器通過 FTP 提供和跟蹤文件的進度
• 您可能必須回退到您的 HTTP 協議並通過 HTTP 上的服務器提供文件以實現您的目標

我已經鏈接到我翻遍的大部分資源——這里還有一些。

• 下載的瀏覽器事件
• 檢測何時瀏覽器接收文件下載
• how-can-i-simulate-an-anchor-click-via-jquery
• 示例 ftp url 在線
• 文件 API 文檔

希望這會有所幫助。