直接先贴上代码：
HTML:
<%--批量添加商品--%>
<form id="importModel" class="hn-form" action="" enctype="multipart/form-data">
<dl>
<dt><i>*</i>CSV文件：</dt>
<dd>
<input accept=".csv" id="csv-file" name="file" style="margin-top: 7px;" type="file">
</dd>
</dl>
<dl>
<dt><i>*</i>商品分类：</dt>
<dd>
<span id="1productType-span-1">
<select class="hn-select" id="productTypeId-1" name="categoryLevel1" onchange="getNextLevelDate1(1,this.value,this.value,null,null);">
<option value="" selected="selected">请选择</option>
<c:forEach items="${productTypeBeanList}" var="type1">
<c:choose>
<c:when test="${productTypeFlag}">
<option value="${type1.class1}">${type1.class1Name}</option>
</c:when>
<c:otherwise>
<option value="${type1.productTypeId}">${type1.sortName}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</span>
<span id="1productType-span-2"></span>
<span id="1productType-span-3"></span>
<span>（必须选到最后一级）</span>
</dd>
</dl>
<dl>
<dt><i>*</i>店铺商品分类：</dt>
<dd>
<select class="hn-select" style="min-width: 90px" id="1shopProCategoryId"
name="shopProCategoryId">
<option value="">-请选择-</option>
<c:forEach items="${shopProCategoryList}" var="category">
<option value="${category.shopProCategoryId}">
${category.shopProCategoryName}
</option>
</c:forEach>
</select>
</dd>
</dl>
<dl>
<dt></dt>
<dd>
<a onclick="submitCsvFile();" class="hn-btn hn-info-btn" href="javascript:;">提交</a>
</dd>
</dl>
</form>
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对象的介绍，可以参考这篇文章
