jquery.form.js ajax提交上传文件

项目中最近有用到表单提交，是带有图片上传的表单录入，需要ajax异步提交，网上找了好多例子都是只能提交上传字段一个信息的，这里整理一下。表单里有普通文本信息字段也有图片上传字段。

1、jsp代码--引入jquery和jquery.form.js

<script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="<%=basePath %>js/jquery.form.js"></script>

<!--form表单，异步提交一定使用submit按钮，form配置如下-->

<form id="userForm"method="post" action="" enctype="multipart/form-data"class="bl-form bl-formhor fl">

<table>

<tr>

<td class="Taa"><label for="enterpriseName">*企业名称：</label></td>

<td class="Tbb"><input type="text" name="enterpriseName" id="enterpriseName" readOnly class="inp1"/></td>

</tr>

<tr>

<td class="Taa">身份证图片：</td>

<td><a href="javascript:;" class="btn btn2 a_uplaod"><input type="file" name="identitypic" id="pic" οnchange="javascript:setImagePreview();">上传图片</a></td>

</tr>

</table>

<input type="button" value="确认升级" class="mg btn btn2 d2-5" οnclick="ajaxSubmitForm();"/>

<input type="button" value="清除" class=" btn btn2 d2-5" οnclick="resetForm();"/>

</form>

2、javascript代码

function ajaxSubmitForm() {

var option = {

url : '${pageContext.request.contextPath}/userController/upgradeUser_form',

type : 'POST',

dataType : 'json',

headers : {"ClientCallMode" : "ajax"}, //添加请求头部

success : function(data) {

if("success"==data.resultMessage){

alert("个人用户已成功升级为企业用户！");

}

else{

alert("企业用户升级失败,请联系管理员！");

return;

}

},

error: function(data) {

alert("企业用户升级失败,请联系管理员！");

}

};

$("#userForm").ajaxSubmit(option);

return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交

}