Jquery.form.js Ajax Submission Upload file

Project recently useful to form submission, is with the image upload form input, the need for Ajax asynchronous submission, online to find a lot of examples are only to submit the upload field a message, here to tidy up a bit. There are plain text information fields in the form as well as image upload fields.

1. JSP code--Introduce jquery and 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 form, asynchronous commit must use the Submit button, form is configured as follows-

<form id= "UserForm" method= "POST" action= "" enctype= "Multipart/form-data" class= "Bl-form bl-formhor fl" >
<table>
<tr>
&LT;TD class= "Taa" ><label for= "enterprisename" >* Enterprise name:</label></td>
&LT;TD class= "TBB" ><input type= "text" name= "Enterprisename" id= "Enterprisename" readOnly class= "INP1"/>< /TD>
</tr>
<tr>
&LT;TD class= "TAA" > ID picture:</td>
<td><a href= "javascript:;" class= "btn btn2 a_uplaod" ><input type= "file" Name= "Identitypic" id= "pic" Onchange= "Javascript:setimagepreview ();" > Upload Images </a></td>
</tr>
</table>
<input type= "button" value= "Confirm Upgrade" Class= "mg btn btn2 d2-5" onclick= "Ajaxsubmitform ();" />
<input type= "button" value= "clear" class= "btn btn2 d2-5" onclick= "Resetform ();" />
</form>

2. JavaScript code

function Ajaxsubmitform () {
var option = {
URL: ' ${pagecontext.request.contextpath}/usercontroller/upgradeuser_form ',
Type: ' POST ',
DataType: ' JSON ',
Headers: {"Clientcallmode": "Ajax"},//Add request Header
Success:function (data) {
if ("Success" ==data.resultmessage) {
Alert ("Individual user has successfully upgraded to Enterprise user!") ");
}
else{
Alert ("Enterprise user upgrade failed, please contact administrator!") ");
Return
}
},
Error:function (data) {
Alert ("Enterprise user upgrade failed, please contact administrator!") ");
}
};
$ ("#userForm"). Ajaxsubmit (option);
return false; It is a good idea to return false, because if the button type is submit, the form will be submitted again, and false prevents the form from being resubmitted again.
}

Jquery.form.js Ajax Submission Upload file