ajax提交含有input=file的form

直接先贴上代码：
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对象的介绍，可以参考这篇文章