jQuery 上传进度和 AJAX 文件上传 [英] jQuery Upload Progress and AJAX file upload

问题描述

好像我没有清楚地传达我的问题.我需要发送一个文件(使用 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.

我需要的只是执行此操作的代码，并且它需要在所有主要浏览器(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 的文件.这是在 facebook 应用程序的 iframe 内.它在 Firefox 中有效，但在 chrome/safari 中失败.

I am using the jquery.uploadprogress plugin to 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.

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

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?

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

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

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

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.

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

推荐答案

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

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

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

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

(它还包括拖放界面，但很容易被忽略.)

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

基本上归结为:

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

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

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 使服务器代码更清晰，更向后兼容(因为请求现在具有与普通表单完全相同的格式).

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

所有这些都不是实验性的，而是非常现代的.Chrome 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 文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！