jQuery的上传进度和AJAX文件上传

问题描述

好像我还没有清楚地传达我的问题。我需要发送（使用AJAX）的文件，我需要得到使用 Nginx的HttpUploadProgressModule 文件的上传进度。我需要一个很好的解决了这个问题。我曾尝试与jquery.uploadprogress插件，但我发现自己不得不重写大部分是得到它在所有浏览器工作，使用AJAX来发送文件。

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.

所有我需要的是code要做到这一点，它需要在所有的主流浏览器（Chrome浏览器，Safari浏览器，Firefox和IE）的工作。它甚至会更好，如果我能得到一个解决方案，可以处理多个文件上传。

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.

我使用的是 jquery.uploadprogress插件来从一个文件的上传进度NginxHttpUploadProgressModule。这是一个iframe的Facebook应用程序中。它工作在Firefox，但它无法在镀铬/ Safari浏览器。

推荐答案

上传文件实际上是可能与AJAX这些天。是的，AJAX，而不是一些蹩脚的AJAX崇拜者像SWF或Java。

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

这个例子可以帮助你： HTTP：//js1.hotblocks .NL /测试/ AJAX /文件拖放drop.html

This example might help you out: http://js1.hotblocks.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>

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

所以基本上它归结为是这样=）

So basically what it comes down to is this =)

xhr.send(file);

其中，文件是typ​​eof运算的Blob ：

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

另一个（更好的IMO）的方法是使用 FORMDATA 。这可以让你1）命名的文件，就像在一个表格2）发送其他的东西（文件太），喜欢的形式。

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.

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

FORMDATA 使服务器code更清洁，更向下兼容（因为要求，现在有完全一样的格式正常形式）。

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

所有的一切是不是实验，但很现代。铬8+和Firefox 4+知道该怎么做，但我不知道任何人。

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.

这是我如何处理请求的PHP（每个请求1图像）：

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

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

这篇关于jQuery的上传进度和AJAX文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！