jQuery上传进度和AJAXfile upload
好像我没有清楚地传达我的问题。 我需要发送一个文件（使用AJAX），我需要使用Nginx HttpUploadProgressModule获取文件的上传进度。 我需要一个很好的解决这个问题的方法。 我曾尝试使用jquery.uploadprogress插件，但是我发现自己不得不重写大部分内容，以使其在所有浏览器中运行，并使用AJAX发送文件。
我所需要的是执行此操作的代码，并且需要在所有主stream浏览器（Chrome，Safari，FireFox和IE）中运行。 这将是更好的如果我能得到一个解决scheme，将处理多个file upload。
我正在使用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分。
现在用AJAX上传文件实际上是可能的。 是的，AJAX，而不是一些蹩脚的AJAX wannabes像SWF或Java。
这个例子可能会帮助你： http : //js1.hotblocks.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使得服务器代码更加清晰并且更向后兼容（因为请求现在具有与正常forms完全相同的格式）。
所有这些都不是实验性的，而是非常现代的。 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的方法。
-
我怎样才能asynchronous上传文件？
-
AJAXfile upload的十个例子 – 这是今年发布的。
更新：这是一个用于多file upload的JQuery插件。
