关于页面JSP的Ajax提交file上传文件类型的表单的一些实例及遇到的问题和解决办法
ajax提交的表单有两种情况：
第一种：input type类型没有file上传文件类型的表单
第二种：input type类型有file上传文件类型的表单
之所以分为两种：是因为原生ajax是不能提交文件的,因为ajax与后台的通信是通过字符串的.
第一种无file类型表单的ajax上传方式：
以下写的JQuery语法的ajax：
导jQuery包
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
$.ajax({
url:"<%=request.getContextPath()%>/UserServlet?operator=webLoadPhoto",
type:"post",
data: $("#form1").serialize(),
success:function(data) {
}
error:function(data){
}
})
参数解释：
- url：发送请求的地址
- type：请求的方式 get/post
- data：绑定表单id为form1， serialize（）方法表示将这个表单序列化
- success : function(){}： ajax提交成功后的回调函数
- error:function(){}：ajax提交失败后的回调函数
上面这种是最简单的无file类型的表单提交，网上还有其他写法，如果想要了解其他写法的话我后续会写上
第二种有file类型表单的ajax上传方式：
由于上传file类型的表单步骤虽然多，但是仔细看是不难的！建议大家有耐心的去看我的解说
先从网上下载一个jQuery.form.js提交表单的插件
地址：https://plugins.jquery.com/form/
导jQuery包
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jQuery.Form.js" type="text/javascript"></script>
$("#upload").click(function(){ //某个按钮的点击事件
document.getElementById("form1").encoding="multipart/form-data";
// 注意上面第一点：file类型表单需要把表单的 enctype属性值设为 enctype="multipart/form-data" 让后台知道这是一个二进制表单提交类型.
有时候这个enctype会由于一些问题导致后台识别不了是二进制表单提交，如果有这种情况，enctype="multipart/form-data" 换成 encoding="multipart/form-data" 或者两个一起写上去
var option = {
url :"<%=request.getContextPath()%>/UserServlet?operator=webLoadPhoto",
type :"post",
clearForm:false,
resetForm:false,
success : function(data) {
alert('上传成功!');
}
};
})
$("#form1").ajaxSubmit(option);
return false;
)}
参数解释：
var option是一个JavaScript对象的定义
- url：发送请求的地址
- type：请求的方式 get/post
- clearForm:表示提交ajax后是否清空表单字面值 （input type=text 框这里有你输入的值例如 11111，如果clearForm值为true，那么ajax提交后会清空框上的值11111）
- resetForm:表示提交ajax后是否重置表单值 （input type=text 框这里有你输入的值例如 11111，如果resetForm值为true，那么ajax提交后会清空 框上的值11111，同时重置成刚加载表单时候的input type=text的样子。）
- 第三第四点注意区别！
- success : function(){}： ajax提交成功后的回调函数
- error:function(){}：ajax提交失败后的回调函数
- $("#form1").ajaxSubmit(option); 是jQuery.form.js的一个ajax提交表单的方法，它可以优秀的把含有file类型的表单提交给后台
ps：reset是重置成最初状态，最初状态是可能有默认值的
clear是清空form控件的值
