使用HTML5文件上传使用AJAX和jQuery [英] Using HTML5 file uploads with AJAX and jQuery

问题描述

当然，也有类似的问题上SO躺在附近。但似乎没有很符合我的要求。下面是我在找什么做的：

Admittedly, there are similar questions lying around on SO. But it seems none quite meet my requirements. Here is what I'm looking to do:

• 上传数据的整个形式，一块这是一个单文件
• 与codeigniter的文件上传库工作

直到这里，一切都很好。在我的数据库中的数据得到，因为我需要它。好好。但我也想通过Ajax后提交我的形式：

Up until here, all is well. The data gets in my database as I need it. Good good. But I'd also like to submit my form via an AJAX post:

• 使用原生的HTML5文件API，而不是Flash或一个iFrame的解决方案
• preferably与低级别的接口阿贾克斯jQuery的方法

我想我能想象如何通过自动上传文件，要做到这一点，当使用纯JavaScript字段的值的变化，但我宁愿做这一切一举上提交的jQuery。我想这是不可能的，通过查询字符串做，因为我需要通过整个文件的对象，但我在做什么，在这一点上有点失落。我是不是追独角兽吗？

I think I could imagine how to do this by auto-uploading the file when the field's value changes using pure javascript, but I'd rather do it all in one fell swoop on for submit in jQuery. I'm thinking it's not possible to do via query strings as I need to pass the entire file object, but I'm a little lost on what to do at this point. Am I chasing a unicorn here?

非常感谢任何帮助，您可以给。

Thanks so much for any help you could give.

推荐答案

这不是太硬。首先，看看的FileReader接口。

It's not too hard. Firstly, take a look at FileReader Interface.

所以，当表单提交，赶上提交过程以及

So, when the form is submitted, catch the submission process and

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file
var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = shipOff;
//reader.onloadstart = ...
//reader.onprogress = ... <-- Allows you to update a progress bar.
//reader.onabort = ...
//reader.onerror = ...
//reader.onloadend = ...


function shipOff(event) {
    var result = event.target.result;
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission);
}

然后，在服务器端（即myscript.php）：

Then, on the server side (i.e. myscript.php):

$data = $_POST['data'];
$fileName = $_POST['fileName'];
$serverFile = time().$fileName;
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

或者类似的东西。我可能会被误认为（如果我是，请指正），但这应该将文件存储为像 1287916771myPicture.jpg 在 /上传/ 您的服务器上，并用JSON变量回应（对 continueSubmission（）函数）包含在服务器上的文件名。

Or something like it. I may be mistaken (and if I am, please, correct me), but this should store the file as something like 1287916771myPicture.jpg in /uploads/ on your server, and respond with a JSON variable (to a continueSubmission() function) containing the fileName on the server.

查看 的fwrite（） 和 jQuery.post（） 。

在上述网页它详细介绍了如何使用<一个href="http://dev.w3.org/2006/webapi/FileAPI/#readAsBinaryString"><$c$c>readAsBinaryString(), readAsDataUrl（） 和的 readAsArrayBuffer（） 了解您的其他需求（如图像，视频等）。

On the above page it details how to use readAsBinaryString(), readAsDataUrl(), and readAsArrayBuffer() for your other needs (e.g. images, videos, etc).

这篇关于使用HTML5文件上传使用AJAX和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！