JQuery 上传进度和 AJAX 文件上传

看来我没有清楚地表达我的问题。我需要发送一个文件(使用 AJAX) ，我需要得到使用 上传程序模块文件的上传进度。我需要一个解决这个问题的好办法。我已经尝试使用 jquery.uploadProgress 插件，但是我发现自己不得不重写大部分内容，以使它能够在所有浏览器中工作，并使用 AJAX 发送文件。

所有我需要的是这样做的代码，它需要在所有主要的浏览器(Chrome，Safari，FireFox，和 IE)工作。如果我可以得到一个解决方案，将处理多个文件上传更好。

我使用 上传进度插件从 NginxHttpUploadProgressModule 获取文件的上传进度。这是 Facebook 应用程序的 iframe 内部。它在 Firefox 中可以工作，但在 chrome/safari 中失败了。

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

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

你知道我该怎么补救吗？

我也想发送文件时，使用 AJAX 完成。我将如何实现这一点？

编辑:
我需要这个很快，它是重要的，所以我要把这个问题100点奖金。第一个回答的人将得到100分。

编辑2:
杰克33帮我解决了第一个问题。第一个留下回应的人如何发送文件与阿贾克斯太将收到100分。罢工

149302 次浏览
小开

下面是一些使用 AJAX 上传文件的选项:

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

小开
最佳答案

上传文件实际上是可能的 AJAX 这些天。是的，AJAX，而不是一些蹩脚的 AJAX 的崇拜者，如 swf 或 java。

这个例子可能对您有所帮助: 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使得服务器代码更加简洁和向后兼容(因为请求现在具有与普通表单完全相同的格式)。

所有这些都不是实验性的，而是非常现代的。Chrome8 + 和 Firefox4 + 知道该怎么做，但我不知道还有其他什么。

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

提交答案