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

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

以前我有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上顯示進度加載器？請幫助。

來源

2016-11-23 Vivek Tankaria

只是好奇 - ajax是否支持ftp？ –

好吧，我做了一些挖掘，並認爲[XMLHttpRequest]（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest）支持其他協議即viz。 FTP。也許你可以使用[File API]（https://developer.mozilla.org/en-US/docs/Web/API/File）與XMLHttpRequest一起來實現你的目標。 –

我試過&測試了三種通過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服務器似乎並沒有起到訪問控制頭，也由 post

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); },

Anchor tag

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

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); }

下行：雖然這個下載用戶的計算機上的文件，你將無法跟蹤它的進展

File API

我嘗試使用ftp url訪問文件，但我t抱怨了我通過的參數。

var f = new File("ftp://ftp.funet.fi/pub/standards/RFC/rfc959.txt", true)
即使我要成功地傳遞正確的一組則params的，它會抱怨URL的性質，因爲它只有預計到服務器/從用戶的計算機提供服務的路徑提到這post - 糾正我，如果我在這裏錯了。

Concl：

最後我想得出結論，這是不可能的服務& 通過FTP從瀏覽器中使用JS
跟蹤文件的進度您可能必須回退到您的HTTP協議並通過HTTP通過服務器提供文件以實現您的目標

我已經鏈接到我翻遍的大部分資源 - 這裏還有更多。

希望這有助於。

來源

2016-11-23 15:19:48

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

回答

相關問題