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

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

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

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

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st filevar 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 overwritingfwrite($fp, $data);fclose($fp);$returnData = array( "serverFile" => $serverFile );echo json_enpre($returnData);

或类似的东西。我可能会弄错（如果我愿意，请纠正我），但这应将文件存储为

1287916771myPicture.jpg

in

/uploads/

在您的服务器上，并

continueSubmission()

在服务器上使用包含fileName的JSON变量（对函数）进行响应。

签出

fwrite()

并

jQuery.post()

。

在上一页中，它详细说明了如何使用

readAsBinaryString()

，

readAsDataUrl()

和

readAsArrayBuffer()

满足您的其他需求（例如图像，视频等）。