诚然,Stack Overflow上也存在类似的问题,但似乎没有一个完全符合我的要求。
这是我想要做的:
到这里为止,一切都很好。数据根据需要进入我的数据库。但我也想通过AJAX帖子提交表单:
.ajax()
我想我可以想象如何通过使用纯JavaScript来在字段的值更改时自动上传文件来实现此目的,但我宁愿一举完成,就可以在jQuery中提交。我认为无法通过查询字符串进行操作,因为我需要传递整个文件对象,但是此时我有点不知所措。
能做到吗?
不太难。首先,看一下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变量(对函数)进行响应。
1287916771myPicture.jpg
/uploads/
continueSubmission()
签出fwrite()并jQuery.post()。
fwrite()
jQuery.post()
在上一页中,它详细说明了如何使用readAsBinaryString(),readAsDataUrl()和readAsArrayBuffer()满足您的其他需求(例如图像,视频等)。
readAsBinaryString()
readAsDataUrl()
readAsArrayBuffer()