jQuery 上传进度和 AJAX 文件上传

Question

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

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

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

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

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

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

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

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

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

Answer 1

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

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

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

基本上是这样的：

<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>

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

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

xhr.send(file);

file 是 Blob 的类型：http://www.w3.org/TR/FileAPI/

另一种（更好的 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);

FormData 使服务器代码更简洁，更向后兼容（因为请求现在具有与普通格式完全相同的格式）。

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

这就是我在 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;
}

Answer 2

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

• AjaxFileUpload - 页面上需要一个表单元素，但上传文件而不重新加载页面。请参阅Demo。

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

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

• How can I upload files asynchronously?

• Ten Examples of AJAX File Upload - 这是今年发布的。

更新：这是Multiple File Uploading的JQuery插件。