jQuery 上传进度和 AJAX 文件上传

jQuery Upload Progress and AJAX file upload

提问by Conceited Code

It seems like I have not clearly communicated my problem. I need to send a file (using AJAX) and I need to get the upload progress of the file using the Nginx HttpUploadProgressModule. I need a good solution to this problem. I have tried with the jquery.uploadprogress plugin, but I am finding myself having to rewrite much of it to get it to work in all browsers and to send the file using AJAX.

好像我没有清楚地传达我的问题。我需要发送一个文件（使用 AJAX），我需要使用Nginx HttpUploadProgressModule获取文件的上传进度。我需要一个很好的解决方案来解决这个问题。我曾尝试使用 jquery.uploadprogress 插件，但我发现自己必须重写其中的大部分内容才能使其在所有浏览器中工作并使用 AJAX 发送文件。

All I need is the code to do this and it needs to work in all major browsers (Chrome, Safari, FireFox, and IE). It would be even better If I could get a solution that will handle multiple file uploads.

我所需要的只是执行此操作的代码，它需要在所有主要浏览器（Chrome、Safari、FireFox 和 IE）中运行。如果我能得到一个可以处理多个文件上传的解决方案，那就更好了。

I am using the jquery.uploadprogress pluginto get the upload progress of a file from the NginxHttpUploadProgressModule. This is inside an iframe for a facebook application. It works in firefox, but it fails in chrome/safari.

我正在使用jquery.uploadprogress 插件从 NginxHttpUploadProgressModule 获取文件的上传进度。这是在 facebook 应用程序的 iframe 内。它在 Firefox 中有效，但在 chrome/safari 中失败。

When I open the console I get this.

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

Any idea how I would fix that?

I would like to also send the file using AJAX when it is completed. How would I implement that?

EDIT:
I need this soon and it is important so I am going to put a 100 point bounty on this question. The first person to answer it will receive the 100 points.

当我打开控制台时，我得到了这个。

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

知道我将如何解决这个问题吗？

我还想在完成后使用 AJAX 发送文件。我将如何实施？

编辑：
我很快就需要这个，这很重要，所以我将在这个问题上悬赏 100 分。第一个回答的人将获得 100 分。

EDIT 2:
Jake33 helped me solve the first problem. First person to leave a response with how to send the file with ajax too will receive the 100 points.

编辑 2：
Jake33 帮助我解决了第一个问题。第一个回答如何使用ajax发送文件的人也将获得100分。

回答by Rudie

Uploading files is actually possible with AJAX these days. Yes, AJAX, not some crappy AJAX wannabes like swf or java.

如今，使用 AJAX 实际上可以上传文件。是的，AJAX，而不是像 swf 或 java 那样蹩脚的 AJAX 崇拜者。

This example might help you out: https://webblocks.nl/tests/ajax/file-drag-drop.html

这个例子可能会帮助你：https: //webblocks.nl/tests/ajax/file-drag-drop.html

(It also includes the drag/drop interface but that's easily ignored.)

（它还包括拖放界面，但很容易被忽略。）

Basically what it comes down to is this:

基本上它归结为：

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

(demo: http://jsfiddle.net/rudiedirkx/jzxmro8r/)

（演示：http: //jsfiddle.net/rudiedirkx/jzxmro8r/）

So basically what it comes down to is this =)

所以基本上它归结为这个=)

xhr.send(file);

Where fileis typeof Blob: http://www.w3.org/TR/FileAPI/

filetypeof在哪里Blob：http: //www.w3.org/TR/FileAPI/

Another (better IMO) way is to use FormData. This allows you to 1) name a file, like in a form and 2) send other stuff (files too), like in a form.

另一种（更好的 IMO）方法是使用FormData. 这允许您 1) 命名文件，例如在表单中，以及 2) 发送其他内容（也是文件），例如在表单中。

var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);

FormDatamakes the server code cleaner and more backward compatible (since the request now has the exact same format as normal forms).

FormData使服务器代码更清晰，更向后兼容（因为请求现在具有与正常表单完全相同的格式）。

All of it is not experimental, but very modern. Chrome 8+ and Firefox 4+ know what to do, but I don't know about any others.

所有这些都不是实验性的，而是非常现代的。Chrome 8+ 和 Firefox 4+ 知道该做什么，但我不知道其他任何人。

This is how I handled the request (1 image per request) in PHP:

这是我在 PHP 中处理请求（每个请求 1 张图像）的方式：

if ( isset($_FILES['file']) ) {
    $filename = basename($_FILES['file']['name']);
    $error = true;

    // Only upload if on my home win dev machine
    if ( isset($_SERVER['WINDIR']) ) {
        $path = 'uploads/'.$filename;
        $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }

    $rsp = array(
        'error' => $error, // Used in JS
        'filename' => $filename,
        'filepath' => '/tests/uploads/' . $filename, // Web accessible
    );
    echo json_encode($rsp);
    exit;
}

回答by jmort253

Here are some options for using AJAX to upload files:

以下是使用 AJAX 上传文件的一些选项：

• AjaxFileUpload- Requires a form element on the page, but uploads the file without reloading the page. See the Demo.

• List of JQuery Plug-ins Tagged With "File"

• Uploadify- A Flash-based method of uploading files.

• How can I upload files asynchronously?

• Ten Examples of AJAX File Upload- This was posted this year.

• AjaxFileUpload- 页面上需要一个表单元素，但上传文件而不重新加载页面。见演示。

• 标记为“文件”的 JQuery 插件列表

• Uploadify- 基于 Flash 的文件上传方法。

• 如何异步上传文件？

• AJAX 文件上传的十个例子- 这是今年发布的。

UPDATE:Here is a JQuery plug-in for Multiple File Uploading.

更新：这是一个用于多文件上传的 JQuery 插件。