在AJAX和jQuery中使用HTML5文件上传

Question

诚然，Stack Overflow周围也存在类似的问题，但似乎没有一个完全符合我的要求。

这是我想要做的：

• 上载整个数据格式，其中一个是 单个 文件
• 使用Codeigniter的文件上传库

到这里为止，一切都很好。数据根据需要进入我的数据库。但我也想通过AJAX帖子提交表单：

• 使用原生HTML5 File API，而不是Flash或iframe解决方案
• 最好与低级.ajax()jQuery方法接口

我想我可以想象如何通过使用纯JavaScript来在字段的值更改时自动上传文件来实现此目的，但我宁愿一举完成，就可以在jQuery中提交。我认为不可能通过查询字符串来进行操作，因为我需要传递整个文件对象，但是此时我有点不知所措。

能做到吗？

Answer 1

不太难。首先，看一下FileReader接口。

因此，提交表单后，赶上提交过程，然后

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）：

$data = $_POST['data'];
$fileName = $_POST['name'];
$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.jpgin
/uploads/在您的服务器上，并continueSubmission()在服务器上使用包含fileName 的JSON变量（对函数）进行响应。

签出fwrite()并jQuery.post()。

在上一页中，它详细说明了如何使用readAsBinaryString()，readAsDataUrl()和readAsArrayBuffer()满足您的其他需求（例如图像，视频等）。