使用AJAX和jQuery上传HTML5文件
无可否认，在Stack Overflow上也存在类似的问题，但似乎没有任何一个符合我的要求。
这是我正在做的事情：
- 上传整个forms的数据，其中一个是单个文件
- 使用Codeigniter的file upload库
一直到这里，一切都很好。 数据在我需要的时候进入我的数据库。 但我也想通过AJAX提交表单：
- 使用本机HTML5文件API，而不是Flash或iframe解决scheme
- 最好与低级别的
.ajax()jQuery方法进行交互
我想我可以想象如何通过自动上传文件来实现这一点，当字段的值更改使用纯JavaScript，但我宁愿一举全部在jQuery中提交。 我想这是不可能通过查询string来完成的，因为我需要传递整个文件对象，但是我现在有点失落了。
这可以实现吗？
这并不难。 首先，看看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);
或者类似的东西。 我可能会误会（如果是的话，请纠正我），但是这应该将文件存储在服务器的/uploads/ 1287916771myPicture.jpg中，然后使用JSONvariables（ continueSubmission()函数）包含服务器上的fileName。
看看fwrite()和jQuery.post() 。
在上面的页面，它详细介绍了如何使用readAsBinaryString() ， readAsDataUrl()和readAsArrayBuffer()来满足您的其他需求（例如图片，video等）。
使用jQuery（并没有FormData API），你可以使用这样的东西：
function readFile(file){ var loader = new FileReader(); var def = $.Deferred(), promise = def.promise(); //--- provide classic deferred interface loader.onload = function (e) { def.resolve(e.target.result); }; loader.onprogress = loader.onloadstart = function (e) { def.notify(e); }; loader.onerror = loader.onabort = function (e) { def.reject(e); }; promise.abort = function () { return loader.abort.apply(loader, arguments); }; loader.readAsBinaryString(file); return promise; } function upload(url, data){ var def = $.Deferred(), promise = def.promise(); var mul = buildMultipart(data); var req = $.ajax({ url: url, data: mul.data, processData: false, type: "post", async: true, contentType: "multipart/form-data; boundary="+mul.bound, xhr: function() { var xhr = jQuery.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener('progress', function(event) { var percent = 0; var position = event.loaded || event.position; /*event.position is deprecated*/ var total = event.total; if (event.lengthComputable) { percent = Math.ceil(position / total * 100); def.notify(percent); } }, false); } return xhr; } }); req.done(function(){ def.resolve.apply(def, arguments); }) .fail(function(){ def.reject.apply(def, arguments); }); promise.abort = function(){ return req.abort.apply(req, arguments); } return promise; } var buildMultipart = function(data){ var key, crunks = [], bound = false; while (!bound) { bound = $.md5 ? $.md5(new Date().valueOf()) : (new Date().valueOf()); for (key in data) if (~data[key].indexOf(bound)) { bound = false; continue; } } for (var key = 0, l = data.length; key < l; key++){ if (typeof(data[key].value) !== "string") { crunks.push("--"+bound+"\r\n"+ "Content-Disposition: form-data; name=\""+data[key].name+"\"; filename=\""+data[key].value[1]+"\"\r\n"+ "Content-Type: application/octet-stream\r\n"+ "Content-Transfer-Encoding: binary\r\n\r\n"+ data[key].value[0]); }else{ crunks.push("--"+bound+"\r\n"+ "Content-Disposition: form-data; name=\""+data[key].name+"\"\r\n\r\n"+ data[key].value); } } return { bound: bound, data: crunks.join("\r\n")+"\r\n--"+bound+"--" }; }; //---------- //---------- On submit form: var form = $("form"); var $file = form.find("#file"); readFile($file[0].files[0]).done(function(fileData){ var formData = form.find(":input:not('#file')").serializeArray(); formData.file = [fileData, $file[0].files[0].name]; upload(form.attr("action"), formData).done(function(){ alert("successfully uploaded!"); }); });
使用FormData API，您只需将Form的所有字段添加到FormData对象，并通过$ .ajax（{url：url，data：formData，processData：false，contentType：false，type：“POST”}）
