用FormData處理form表單中同時有檔案和普通文字的提交的處理方式
阿新 • • 發佈:2019-02-03
今天在處理檔案上傳的時候,後臺出現request轉換錯誤,這一句報錯
// 轉換成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
結果是由於沒有在servlet.xml寫檔案上傳的配置。
- <beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
-
<!-- 設定上傳檔案的最大尺寸為10MB -->
- <propertyname="maxUploadSize">
- <value>1048576000</value>
- </property>
- <propertyname="maxInMemorySize">
- <value>1024</value>
- </property>
- </bean>
用form來提交表單時,如果form裡面同時有普通文字和檔案,如果form新增enctype="multipart/form-data"屬性,那麼普通文字不能被序列化,因為檔案上傳和普通文字的編碼方式不一致。可以不用寫enctype="multipart/form-data"屬性上傳檔案,即用formData來存放普通文字和檔案資料傳入後臺。
js程式碼:
var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); formData.append('name', $('#name').val()); $.ajax({ url: url, type: 'POST', cache: false, data: formData, processData: false, contentType: false, success: function () { alert("檔案上傳成功!") }, error: functionjsp程式碼:() { } });
<form id="formID" method="post" data-url="${contextPath}/pc/activity/createActivity/add"> <div class="article"> <div class="wd-panel"> <h5>活動資訊</h5> </div> <div class="panel-box panel-box-normal"> <div> <div class="wd-form-group wd-form-group--inline"> <label for="name">活動名稱:</label> <input type="text" placeholder="活動名稱" class="article-long-input" name="name" id="name"> </div> </div> <div> <div class="wd-form-group wd-form-group--inline"> <label for="address">活動地點:</label> <input type="text" placeholder="活動地點" class="article-long-input" name="address" id="address"> </div> </div> <div> <div class="wd-form-group wd-form-group--inline"> <label>活動時間:</label> <input type="text" placeholder="開始時間" name="startTime" id="startTime" onClick="jeDate({dateCell:'#startTime',isTime:true,zIndex:9999999999,format:'YYYY-MM-DD hh:mm'})" readonly> <input type="text" placeholder="結束時間" name="endTime" id="endTime" onClick="jeDate({dateCell:'#endTime',isTime:true,zIndex:9999999999,format:'YYYY-MM-DD hh:mm'})" readonly> </div> </div> <div> <div class="wd-form-group wd-form-group--inline" class="article-long-input"> <label for="file">活動海報:</label> <img id="ImgPr" width="120" height="120" class="wd-img wd-img--rounded" style="margin-left: 8px;"/> <a class="wd-button wd-button--blue"> <input type="file" name="type" id="file" multiple="multiple"/>上傳</input> </a> </div> </div> <div> <div class="wd-form-group wd-form-group--inline"> <label for="description">活動介紹:</label> <textarea class="article-long-input" name="description" id="description" rows="5"></textarea> </div> </div> </div> </div> <div class="article"> <div class="wd-panel"> <h5>設定報名表單</h5> </div> <div class="panel-box panel-box-normal"> <a class="wd-button wd-button--blue" data-click="setForm()" title='測試' url="fragment/activity/setForm.html">設定報名表單</a> </div> </div> <div class="article"> <input class="wd-button wd-button--blue" type="submit" value="釋出"> <a class="wd-button wd-button--default">儲存草稿</a> <a class="wd-button wd-button--default">取消</a> </div> </form>