H5 + input，Formdata，基于springboot多图片与多参数上传前后台交互

(一)基于H5的form表单界面

<div class="wrapper wrapper-content animated fadeInRight ibox-content">

 **<-注意添加form表单属性enctype="multipart/form-data"->**

    <form class="form-horizontal m" id="form-goods-add" enctype="multipart/form-data">
        <input id="treeId" name="categoryId" type="hidden"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">店铺名称：</label>
            <div class="col-sm-8">

            <-thymeleaf 获取店铺名称及id->

                <select id="shopId" name="shopId" class="form-control m-b" th:with="type=${@StoreInfoService.selectStoreInfo()}">
                    <option th:each="storeInfo : ${type}" th:text="${storeInfo.name}"
                            th:value="${storeInfo.id }"></option>
                </select>
            </div>
        </div> 
        <div class="form-group">
            <label class="col-sm-3 control-label">商品名：</label>
            <div class="col-sm-8">
                <input id="name" name="name" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品图片：</label>
            <div class="input-file-box col-sm-8  control-label">
                <span>点击上传图片</span>

                **<-上传多张图片注意input  加入 multiple，如下所示"->**
                <input type="file" name="uploadfile" class="form-control" id="uploadfile" multiple/>



            </div>
        </div>
        <div class="form-group">
            <div id="img-box" col-sm-12  control-label></div>
        </div>
    </form>
</div>
           

（二）Ajax提交表单

function submitHandler() {
        if ($.validate.form()) {
        
            <-根据表单id获取表单数据->
            var data = new FormData(document.getElementById("form-goods-add"));
            
            <-获取要上传的图片->
            var $file = $("#uploadfile");
            var fileObj = $file[0];
            var n = fileObj.files.length;

            <-将图片放入要提交的formdata数据->
            for(var i=0;i<n;i++) {
                data.append("file", fileObj.files[i]);
            }

           <-自定义上传路径->
            var url=prefix + "/add";
            $.ajax({
                type: 'post',
                url: url,
                dataType: "formData",
                data: data,

                <-这两个必须设置->
                contentType: false, //不设置内容类型
                processData: false, //不处理数据
                
                success: function (data) {

                }

                });
           // $.operate.save(prefix + "/add", $('#form-goods-add').serialize());
        }
    }
           

（三）基于springboot的controller层参数接收

<-注意@RequestParam("file")要和ajax中 data.append("file", fileObj.files[i])引号中的名称一致->
public AjaxResult addSave (@RequestParam(value="file",required = false) MultipartFile[] files, Goods goods)throws IOException
	{
	    System.out.println(files.length);
	  }
           

（四） 如图传入三个图片及若干参数，可见后台已经接收到三个图片及参数所属类