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

（四） 如圖傳入三個圖檔及若幹參數，可見背景已經接收到三個圖檔及參數所屬類