php - 上传过程中文件上传进度

Question

<分区>

Answer 1

更新状态的 JavaScript 在哪里？除非您没有发布某些内容(或者我错过了)，否则您实际上错过了一个重要的部分。

您引用的教程中提到了这一点:

There are a few different methods for getting progress information to the browser (long vs. short polling). Here we will use short polling since it is simpler and less taxing on server resources, though keep in mind it is not as responsive as long polling.

When our form is submitted via AJAX, the browser will continuously poll the server for upload progress.

你有三个选择:

1 - 不断刷新请求服务器进度的页面 - 基本上它会返回一个页面，上面写着“上传 10% 完成......”等等，直到提交整个表单，然后你处理。

2 - 更容易在 iFrame 中进行轮询/更新(因此请不断刷新 iFrame)

3 - 使用 javascript 调用(通过 JSON 上传 - 你的 View 返回 JSON 作为对 HTML 的反对，你不需要标题)然后通过 JavaScript 更新屏幕。

因此，您需要将其中一种方法挂接到您的表单中。

警告:

话虽如此，您需要以正确的方式配置服务器。上传可以基于 session 、基于 APC 或上传进度模块。您可能会发现这些都没有安装在服务器上以最终部署。

---

更好的整体解决方案(可能)。

所以，既然你无论如何都在使用 JS，那么你也可以在现代浏览器(IE9+、Chrome、FF 等，所以它保存在 main 中使用)中使用 JS 中的一个特性。使用 IE8 它就可以正常工作(没有进度指示器)。到目前为止，我发现它是一个更可靠的替代方案(如果您接受 IE8，用户将获得没有进度条的上传功能)。

您在 XHR 对象的上传属性中添加一个事件监听器。随着上传进度不断调用 EventLister。

您可以将一个挂接到每个文件(这就是我在下面所做的，您需要排队并一次处理一两个，然后在完成后提交主表单)或者您可以挂接到整个表单(一个进度条，一个处理程序服务器端 = 更简单，但用户体验不佳)。

为了提供帮助，这里有一个最近项目的片段，但是网络上有一些教程可以提供帮助。这与您所拥有的有所不同，但变化不大，而且部署和控制起来要简单得多。它使用 jQuery，但如果您使用原始 JS，理论(向 xhr 添加事件监听器)是完全相同的。

我知道这是对您当前方法的一种转变 - 但我也使用了您当前的方法并发现这种方法更好。

jQuery 片段/示例

$.ajax({
xhr: function() {
    var xhrobj = $.ajaxSettings.xhr();
    if (xhrobj.upload) {
        xhrobj.upload.addEventListener('progress', function(event) {
            var percent = 0;
            var position = event.loaded || event.position;
            var total = event.total;
            if (event.lengthComputable) {
                percent = Math.ceil(position / total * 100);
            }
            //Set progress
            $('#upload_' + vr_admin.currentlyUploadIndex + ' .imageProgress .imageProgressBar').css({width: percent * 2});
        }, false);
    }
    return xhrobj;
},
url: upload.php',
type: "POST",
contentType:false,
processData: false,
cache: false,
data: {data fields god here},
success: function(response){
    alert ('UPloaded');
}
}