jQuery上传进度和AJAX文件上传

Question

好像我没有清楚地传达我的问题.我需要发送一个文件(使用AJAX),我需要使用Nginx HttpUploadProgressModule获取文件的上传进度.我需要一个很好的解决方案.我尝试过使用jquery.uploadprogress插件,但我发现自己不得不重写它以使其在所有浏览器中工作并使用AJAX发送文件.

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

我正在使用jquery.uploadprogress插件从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);

filetypeof 在哪里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 - 需要页面上的表单元素,但上载文件而不重新加载页面.参见演示.

• 标有"文件"的JQuery插件列表

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

• 如何异步上传文件？

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

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