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; } }); });