谁能合理解释为什么网络服务器必须协助创建上传进度条？

发布于 2024-07-22 18:44:44 字数 421 浏览 11 评论 0原文

我一直在 Rails 中构建一个小型个人网站，并且已经达到了我需要能够上传文件的程度。这几乎是一项微不足道的任务，根本不需要时间。

需要时间并慢慢侵蚀我的理智的是为用户提供上传进度条的任务。我现在已经看到了至少十几种解决方案，它们似乎都有一个共同点——它们需要在 Web 服务器上安装一个模块。

鉴于我无法控制我的服务器，而且托管公司似乎不太可能安装任何此类动物，我陷入了困境。真正令人抓狂的是，让服务器以任何方式、形式或形式参与到这个过程中是绝对没有必要的。

想一想：您的浏览器打开到远程服务器的套接字并开始发送数据。您的浏览器确切地知道要发送多少字节，并且由于 TCP 确认的魔力，还知道有多少字节已到达服务器端。那么，为什么以飞天面条怪物之名，没有简单的方法可以将这些数据呈现给 Javascript，而不用在该死的服务器上乱搞呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只怪假的太真实 2024-07-29 18:44:45

这里真正的限制是 HTML 表单。它们是十多年前发明的，当时上传更大的文件似乎完全不可行。因此，它们只为您提供一个回调：整个上传完成时（ACTION 参数）。

幸运的是，有一些免费的基于 Flash 的上传器提供进度条。不用担心，大多数都会正常降级（如果用户没有闪存，则提供一个简单的文件上传字段）。所有选项都可以通过 Javascript 进行控制。而且，它们不需要任何特殊的服务器端基础设施。

检查 swfupload.org

回复收藏 0 原文

小红帽 2024-07-29 18:44:45

现在除了 IE（所有版本）之外，几乎所有网络浏览器都可以实现这一点。

JavaScript 相当简单。检查 sourceforge.net 上的 webfolder 项目。它显示所有支持 HTML5 的浏览器的上传百分比。

 function upload() {
   document.folder.encoding = "multipart/form-data";
   if (document.folder.file.files) { 
       var xhr = new XMLHttpRequest();
        var fd = new FormData(document.folder);
        /* event listeners */
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false); // loadend if doesn't matter success or not 
        xhr.addEventListener("error", uploadError, false);
        xhr.open("POST", document.folder.action, true);
        fd.append('submit', 'Upload'); // keep consistent with view, so maybe return method in view
        fd.append('background', '1');
        xhr.send(fd); 
        return false;
   }
   return true;
}


function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var per = (evt.loaded*100/evt.total).toFixed(0)+'%';
        getElement('_progress').innerHTML = per;
        document.title = 'Upload ('+per+')';
    }   else {
        getElement('_progress').innerHTML = evt.loaded;
    }
}

function uploadComplete(evt) {
    getElement('_progress').innerHTML = '100%';
    window.location.reload();
}

function uploadError(evt) {
    getElement('_progress').innerHTML = 'error';
}

我还有为具有更多娱乐能力的网站显示进度条的代码。

It is possible with mostly every web browser now except IE (all versions).

JavaScript is fairly simple. Check webfolder project at sourceforge.net. It shows upload % for all browsers supporting HTML5.

 function upload() {
   document.folder.encoding = "multipart/form-data";
   if (document.folder.file.files) { 
       var xhr = new XMLHttpRequest();
        var fd = new FormData(document.folder);
        /* event listeners */
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false); // loadend if doesn't matter success or not 
        xhr.addEventListener("error", uploadError, false);
        xhr.open("POST", document.folder.action, true);
        fd.append('submit', 'Upload'); // keep consistent with view, so maybe return method in view
        fd.append('background', '1');
        xhr.send(fd); 
        return false;
   }
   return true;
}


function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var per = (evt.loaded*100/evt.total).toFixed(0)+'%';
        getElement('_progress').innerHTML = per;
        document.title = 'Upload ('+per+')';
    }   else {
        getElement('_progress').innerHTML = evt.loaded;
    }
}

function uploadComplete(evt) {
    getElement('_progress').innerHTML = '100%';
    window.location.reload();
}

function uploadError(evt) {
    getElement('_progress').innerHTML = 'error';
}

I have also code displaying progress bar for sites with more entertaining abilities.

回复收藏 0 原文