javascript - 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 声明它支持其他协议(protocol)，但它似乎无法访问通过 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 服务器似乎不提供访问控制 header ，这也得到了 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

如果您使用的是现代浏览器，您可以使用 download 属性直接将 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); 
  }

• 缺点:虽然这会将文件下载到用户的计算机上，但您将无法跟踪其进度

File API

• 我尝试使用 FTP URL 访问该文件，但它提示我传递的参数。

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

• 即使我成功传递了正确的参数集，它会提示 URL 的性质，因为它只期望由服务器/用户计算机提供的路径，如中所述这个post - 如果我错了请纠正我。

结论:

• 最后我想得出结论，可能无法提供服务&使用 js 从浏览器通过 FTP 跟踪文件的进度
• 您可能必须退回到 HTTP 协议(protocol)并通过 HTTP 服务器提供文件才能实现您的目标

我已经链接到了我翻遍的大部分资源 - 这里还有一些。

• Browser event of a download
• detect-when-browser-receives-file-download
• how-can-i-simulate-an-anchor-click-via-jquery
• Sample ftp urlonline
• File API Documentation

希望这有帮助。