javascript - 通过 AJAX 和 jQuery 使用 HTML5 文件上传

Question

诚然，Stack Overflow 上也有类似的问题，但似乎都不太符合我的要求。

这是我想要做的:

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

到目前为止，一切都很好。数据在我需要时进入我的数据库。但我也想通过 AJAX 帖子提交我的表单:

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

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

这能实现吗？

Answer 1

这并不难。首先，看看FileReader Interface .

因此，当提交表单时，捕获提交过程并

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.jpg 在您的服务器上的 /uploads/ 中，并使用包含服务器上文件名的 JSON 变量(对 continueSubmission() 函数)进行响应。

查看 fwrite()和 jQuery.post() .

在上面的页面上详细说明了如何使用readAsBinaryString() , readAsDataUrl() , 和 readAsArrayBuffer()满足您的其他需求(例如图片、视频等)。