Ajax请求上传多文件的表单处理(jQuery)
在Ajax请求的时候无法直接获得文件内容,需要做一些特殊处理:
var form = $(this).closest("form");
//原始表单数据
var formData = form.serializeArray();
//Media 文件上传控件
var media = form.find('input[name="images[]"]');
var filesSelected = false;
//最终表单数据
var filesFormData = new FormData();
media.each(function() {
if (this.files.length > 0) {
filesSelected = true;
$.each(this.files, function(i, file) {
filesFormData.append('image' + i, file);
});
}
});
if (!filesSelected) { //如果强制文件上传做一些处理
window.alert(media.attr("data-validation-required-message"));
return false;
} else {
//获取文件列表,这里不要用console.log()
console.log("FormData:");
filesFormData.forEach(function(value, key) {
console.log(key + ':', value);
});
}
//将表单数据与文件数据合并
$.each(formData, function(i, field) {
filesFormData.append(field.name, field.value);
//console.log(field.name + ' - ' + field.value);
});限制文件大小和上传类型
$("input[name='images[]']").on("change", function(){
var media = $(this);
var maxSize = 1 * 1024 * 1024;
var allowedTypes = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png'];
$.each(this.files, function(i, file) {
if (file.size > maxSize) {
alert(media.attr("size-error-message"));
media.val('');
return;
}
if (!allowedTypes.includes(file.type)) {
alert(media.attr("type-error-message"));
media.val('');
return;
}
});
});