用FormData处理form表单中同时有文件和普通文本的提交的处理方式

   今天在处理文件上传的时候，后台出现request转换错误，这一句报错

// 转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;

 

java.lang.ClassCastException: org.apache.shiro.web.servlet.ShiroHttpServletRequest cannot be cast to..

结果是由于没有在servlet.xml写文件上传的配置。

1. <bean id="multipartResolver"   class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
2.         <!-- 设置上传文件的最大尺寸为10MB -->    
3.         <property name="maxUploadSize">    
4.             <value>1048576000</value>    
5.         </property>    
6.             <property name="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>