直接先贴上代码：
HTML:
-
*CSV文件：
-
*商品分类：
-
请选择
${type1.class1Name}
${type1.sortName}
(必须选到最后一级)
-
*店铺商品分类：
-
name="shopProCategoryId">
-请选择-
${category.shopProCategoryName}
js：
//form提交
function submitCsvFile() {
var filePath = $('#csv-file')[0].files[0],
levelThreeVal = $("#1productType-span-3").find("option:selected").val(),
shopGoodsCate = $("#1shopProCategoryId").find("option:selected").val();
console.log(filePath);
if (!$('#csv-file').val()) {
layer.msg('请选择要添加的csv文件!');
}else if (!levelThreeVal) {
layer.msg('请选择三级商品分类！');
}else if (!shopGoodsCate) {
layer.msg('请选择店铺商品分类！');
}else {
var categoryLevel1 = $('#1productType-span-1').find("option:selected").val(),
categoryLevel2 = $('#1productType-span-2').find("option:selected").val(),
categoryLevel3 = $('#1productType-span-3').find("option:selected").val();
console.log(categoryLevel1,categoryLevel2,categoryLevel3);
console.log('文件路径===',filePath);
var formData = new FormData();
formData.append('filePath',filePath);
formData.append('categoryLevel1',categoryLevel1);
formData.append('categoryLevel2',categoryLevel2);
formData.append('categoryLevel3',categoryLevel3);
formData.append('shopProCategoryId',shopGoodsCate);
console.log(formData);
return;
$.ajax({
type : 'post',
url : '/workflow/model/import',
dataType : 'json',
data : formData,
contentType: false,
processData: false,
success : function(res){
console.log(res);
}
});
}
}
这是今天做项目适合碰见的问题，来做几点总结：
1、关于form的enctype="multipart/form-data"属性
enctype(编码方式)属性常用的值有两个，一个为application/x-www-form-urlencoded(默认值)为传递值的默认编码方式。application为应用的意思(--->app)。
另一种方式为multipart/form-data。form包含文件时，必须采用这种编码方式。multipart为多部分的意思。
2、input type=file的files属性
该属性为js原生对象的一个属性，所以用jq获取元素后应转为原生js对象。
files获取到的为input的获取的文件的对象的集合files，所以加上[0]来拿该选中的文件对象，也就是我们需要传给后台的文件对象。
常用的方法有：file.name//获取本地文件系统的文件名；file.size//文件的字节大小；file.type//字符串类型,文件的MIME类型(MIME [maɪm] 为哑剧演员的意思，为一种编码方式)。
3、FormData对象
传统的form提交，文件是无法被提交的。利用FormData，可以轻松的和ajax结合进行文件上传，常用的方式有三种：
1、就是上面的创建一个空的 Form Data 对象，再用 append() 逐个添加键值对
2、取form元素对象作为参数传入FormData对象中
var FormElement = document.getElementById("myFormElement");
var new_FormData = new FormData( FormElement );
值得注意的是，这里也需要传入的为js对象而不是Jq对象
3、利用form对象的getFormData方法生成
var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();
使用jq提交时必须声明： processData:false, // 告诉jquery不要处理发送的数据 contentType:false // 告诉jquery不要设置content-Type请求头
关于更多FormData对象的介绍，可以参考这篇文章