通过AJAX和jQuery使用HTML5文件上传
无可否认，堆栈溢出中存在类似的问题，但似乎没有任何结果符合我的要求。
这是我想要做的事情：
直到这里，一切都很好。 数据在我需要的时候进入我的数据库。 但我也想通过AJAX帖子提交我的表单：
.ajax() jQuery方法进行交互 我想我可以想象如何通过自动上传文件来实现这一点，当字段的值更改使用纯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);
或者类似的东西。 我可能会误解（如果我是这样的话，请纠正我），但是这应该将文件存储在服务器上的/uploads/ 1287916771myPicture.jpg中，然后使用JSON变量（对continueSubmission()函数）进行响应。包含服务器上的fileName。
看看fwrite()和jQuery.post() 。
在上面的页面中，它详细介绍了如何使用readAsBinaryString() ， readAsDataUrl()和readAsArrayBuffer()来满足其他需求（例如图像，视频等）。
有了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+"rn"+
"Content-Disposition: form-data; name=""+data[key].name+""; filename=""+data[key].value[1]+""rn"+
"Content-Type: application/octet-streamrn"+
"Content-Transfer-Encoding: binaryrnrn"+
data[key].value[0]);
}else{
crunks.push("--"+bound+"rn"+
"Content-Disposition: form-data; name=""+data[key].name+""rnrn"+
data[key].value);
}
}
return {
bound: bound,
data: crunks.join("rn")+"rn--"+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，您只需将表单的所有字段添加到FormData对象，并通过$ .ajax（{url：url，data：formData，processData：false，contentType：false，type：“POST”}）发送它
链接地址: http://www.djcxy.com/p/55773.html上一篇: Using HTML5 file uploads with AJAX and jQuery
下一篇: Forcing the browser to reload css/js only if they have changed