1. 程式人生 > >用FormData處理form表單中同時有檔案和普通文字的提交的處理方式

用FormData處理form表單中同時有檔案和普通文字的提交的處理方式

   今天在處理檔案上傳的時候,後臺出現request轉換錯誤,這一句報錯

// 轉換成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;

結果是由於沒有在servlet.xml寫檔案上傳的配置。
  1. <beanid="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  2.         <!-- 設定上傳檔案的最大尺寸為10MB -->
  3.         <propertyname="maxUploadSize">
  4.             <value>1048576000</value>
  5.         </property>
  6.             <propertyname="maxInMemorySize">
  7.             <value>1024</value>
  8.         </property>
  9.     </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: function 
() { } });
jsp程式碼:
<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>