在tp3.2.3中使用 FormData 对象实现表单的文件上传功能遇到的一个问题及解决方法
2017-09-16 17:04
1616 查看
表单的html代码如下:
因为上述操作包含了上传文件的操作,而普通ajax无法实现文件上传,经过百度有使用FormData对象与插件这两种方法,详见前一篇转载的博文,于是我就尝试了一下FormData对象的方法。
情景:我要利用thinkPHP3.2.3框架实现增加商品时对其输入数据合法性的验证之后到前台提示,一开始是通过内置的跳转函数实现的跳转提示,会跳到一个页面显示再返回,这样给人的视觉体验很不好,于是想修改为ajax方式来实现异步更新数据而不刷新此页面,也不离开此页面,而是通过alert弹出警告框来提示用户输入数据的合法性与否。因为商品的表单数据中包含文件,所以一开始使用ajax时使用jquery内置的收集数据的方法:$("form").serialize(); 但是它不支持文件数据的收集,于是百度后就尝试使用FormData加上ajax来实现表单的异步提交并实现文件的上传。
首先在控制器就要修改执行成功或失败时的跳转函数,如
$this->success('添加成功!',U('listGoods'),true);
$this->error('添加失败!',U('add'),true);细心的同学应该发现了跟以前写的有不同之处吧,就是多给了一个参数,默认是false,设置为true时表明表单是使用ajax提交的,从而不执行跳转,而是返回json格式的数据如下:
{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":1,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}
{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":0,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}这样就可以在前台的ajax执行的success回调函数内部获取数据,status=1表示成功,status=0表示失败。
一开始使用的方法代码如下:
function testAjax(){
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
url:"__SELF__",
type:"post",
data:formData,
dataType: 'json',
processData:false,// 告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
success:function(data){
window.clearInterval(timer);
console.log("over...");
//判断是否添加成功
if(data.status == 1){
alert(data.info);
location.href = data.url;
}
else{
alert(data);
}
},
error:function(e){
alert("错误");
window.clearInterval(timer);
}
});
get();//此处为上传文件的进度条
}正常情况下是不跳转的,但是我猜应该是使用了FormData对象的缘故,导致ajax执行回调函数后,一直自行跳到一个空白界面显示返回的json格式的提示信息。这样的效果显然不是我要的,于是就开始测试,看到底是哪里出错了,最后发现确实没法控制它,正一筹莫展时突然发现现在使用的是绑定了提交按钮的onclick事件,我猜会不会是这个原因,反正改一下也没关系,于是将其改成限制通过按钮提交表单的方法来实现果然不自行跳转了,真的激动啊!!这时明白最关键原因应该跟FormData无关了,其实就是提交方式的原因导致的。
下面是正常实现了的方法代码:
$("form[name=addForm]").submit(function(){ //ok
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
url:"__SELF__",
type:"post",
data:formData,
dataType: 'json', //返回的数据类型
processData:false,// 告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
success:function(data)//ajax执行后的回调函数
{
//判断是否添加成功
if(data.status == 1){
alert(data.info);
location.href = data.url;
}
else{
alert(data.info);
}
}
});
return false;//阻止表单提交
});
其实上面的核心代码是一样的,差别就在于第一个绑定了提交按钮的点击事件来实现的表单数据的异步提交,而第二种则阻止了表单按钮的点击提交功能,具体原因我也不会解释
不过还好问题顺利解决了,希望有大佬知道内部原因的可以解释一波,谢谢!
<form name="addForm" id="addForm" action="__SELF__" method="post" enctype="multipart/form-data"> 商品logo:<input type="file" name="goods_logo" /> ... <input type="submit" value="提交" onclick="testAjax();"/> </form>
因为上述操作包含了上传文件的操作,而普通ajax无法实现文件上传,经过百度有使用FormData对象与插件这两种方法,详见前一篇转载的博文,于是我就尝试了一下FormData对象的方法。
情景:我要利用thinkPHP3.2.3框架实现增加商品时对其输入数据合法性的验证之后到前台提示,一开始是通过内置的跳转函数实现的跳转提示,会跳到一个页面显示再返回,这样给人的视觉体验很不好,于是想修改为ajax方式来实现异步更新数据而不刷新此页面,也不离开此页面,而是通过alert弹出警告框来提示用户输入数据的合法性与否。因为商品的表单数据中包含文件,所以一开始使用ajax时使用jquery内置的收集数据的方法:$("form").serialize(); 但是它不支持文件数据的收集,于是百度后就尝试使用FormData加上ajax来实现表单的异步提交并实现文件的上传。
首先在控制器就要修改执行成功或失败时的跳转函数,如
$this->success('添加成功!',U('listGoods'),true);
$this->error('添加失败!',U('add'),true);细心的同学应该发现了跟以前写的有不同之处吧,就是多给了一个参数,默认是false,设置为true时表明表单是使用ajax提交的,从而不执行跳转,而是返回json格式的数据如下:
{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":1,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}
{"info":"\u6dfb\u52a0\u6210\u529f\uff01","status":0,"url":"\/shop\/index.php\/Admin\/Goods\/listGoods.html"}这样就可以在前台的ajax执行的success回调函数内部获取数据,status=1表示成功,status=0表示失败。
一开始使用的方法代码如下:
function testAjax(){
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
url:"__SELF__",
type:"post",
data:formData,
dataType: 'json',
processData:false,// 告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
success:function(data){
window.clearInterval(timer);
console.log("over...");
//判断是否添加成功
if(data.status == 1){
alert(data.info);
location.href = data.url;
}
else{
alert(data);
}
},
error:function(e){
alert("错误");
window.clearInterval(timer);
}
});
get();//此处为上传文件的进度条
}正常情况下是不跳转的,但是我猜应该是使用了FormData对象的缘故,导致ajax执行回调函数后,一直自行跳到一个空白界面显示返回的json格式的提示信息。这样的效果显然不是我要的,于是就开始测试,看到底是哪里出错了,最后发现确实没法控制它,正一筹莫展时突然发现现在使用的是绑定了提交按钮的onclick事件,我猜会不会是这个原因,反正改一下也没关系,于是将其改成限制通过按钮提交表单的方法来实现果然不自行跳转了,真的激动啊!!这时明白最关键原因应该跟FormData无关了,其实就是提交方式的原因导致的。
下面是正常实现了的方法代码:
$("form[name=addForm]").submit(function(){ //ok
var formData = new FormData(document.getElementById("addForm"));
$.ajax({
url:"__SELF__",
type:"post",
data:formData,
dataType: 'json', //返回的数据类型
processData:false,// 告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
success:function(data)//ajax执行后的回调函数
{
//判断是否添加成功
if(data.status == 1){
alert(data.info);
location.href = data.url;
}
else{
alert(data.info);
}
}
});
return false;//阻止表单提交
});
其实上面的核心代码是一样的,差别就在于第一个绑定了提交按钮的点击事件来实现的表单数据的异步提交,而第二种则阻止了表单按钮的点击提交功能,具体原因我也不会解释
不过还好问题顺利解决了,希望有大佬知道内部原因的可以解释一波,谢谢!
相关文章推荐
- 表单包含file上传文件提交,使用ajaxSubmint或者ajaxForm 遇到的问题以及解决方法
- 通过Ajax使用FormData对象无刷新上传文件方法
- Java Web使用Html5 FormData实现多文件上传功能
- Swift使用Alamofire上传图片等FormData表单文件的方法
- 使用H5的formData对象实现文件的异步上传
- 使用struts2实现下载功能遇到的文件中文问题解决经验分享
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- php+html5使用FormData对象提交表单及上传图片的方法
- 使用html+ajax+formdata+SpringMVC实现单个文件,和多个文件上传功能
- C# Asp.net使用FormData对象实现ajax提交表单及上传图片
- Ajax使用FormData对象实现无刷新上传文件
- jQuery Ajax使用FormData对象上传文件的方法
- jQuery Ajax使用FormData对象上传文件的方法
- php+html5使用FormData对象提交表单及上传图片的方法
- html使用iframe实现伪异步表单,实现无刷新上传文件时遇到的问题
- 今天使用jspsmartupload.jar实现上传文件的功能,发现中文乱码,于是总结了下解决方法
- 使用html+ajax+formdata+SpringMVC实现单个文件,和多个文件上传功能
- lamp使用php处理上传文件,调用move_uploaded_file函数遇到目录写权限问题及解决过程
- enctype="multipart/form-data" 文件上传,获取form 表单参数的问题
- 使用commons-fileupload实现文件(doc、pdf)上传,提取表单参数并解决中文乱码