jQuery上传进度和AJAX文件上传
好像我没有清楚地传达我的问题。 我需要发送一个文件（使用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：
杰克33帮助我解决了第一个问题。 第一个留言的人如何用ajax发送文件也会得到100分。
现在使用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使得服务器代码更清晰并且更向后兼容（因为请求现在具有与正常形式完全相同的格式）。
所有这些都不是实验性的，而是非常现代的。 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;
}
以下是使用AJAX上传文件的一些选项：
AjaxFileUpload - 需要页面上的表单元素，但上传文件时不重新加载页面。 看演示。
JQuery插件列表标记为“文件”
Uploadify - 一种上传文件的基于Flash的方法。
我怎样才能异步上传文件？
上传AJAX文件的十个示例 - 今年已发布。
更新：这是一个用于多文件上传的JQuery插件。
链接地址: http://www.djcxy.com/p/3305.html