关于页面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控件的值