文档章节

jquery-form.js 实现图片和表单一同提交

sprouting
 sprouting
发布于 2017/07/13 16:39
字数 743
阅读 89
收藏 0

项目中有一个注册功能,需要用户图片和表单信息一同提交到后台,直接使用ajax提交会报错误

传统的ajax提交
 var url = "${request.contextPath}/login/register.html" ;
        $.ajax({
            url:url,
            type:"POST",
            data:$("#regform").serialize(),
            success: function (message) {
                alert(message);
            }
        });

而如果做成表单单独的图片提交又不太符合需求。

页面的内容:

<#--如果没有设置enctype="multipart/form-data",文件上传会报  The current request is not a multipart request-->
<form action="" id="regform" method="post" enctype="multipart/form-data">
...............表单和图片内容

 <input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='提交' onclick="register()"/>
</form>

这个时候可以考虑jquery-form.js这个插件,可以实现我们的需求。

前面的代码不变,引入该js文件后

//注册
function register(){
    <#--原始的ajax方式提交是失败的-->
    <#--$.ajax({-->
        <#--url:url,-->
        <#--type:"POST",-->
        <#--data:$("#regform").serialize(),-->
        <#--success: function (message) {-->
            <#--alert(message);-->
        <#--}-->
    <#--});-->

        var options = {
            url:'${request.contextPath}/login/xx.html?random='+new Date().getTime(),
            type:'POST',
            //beforeSubmit: showRequest, //提交前处理的函数,也可以在这里写,注意,这里接收的只能是falsetrue,且不能是函数的名带括号的
            dataType:'json', //返回的数据类型:null"xml""script""json"其中之一。
            //resetForm: true, 表示如果表单提交成功是否进行重置
            clearForm:false, //表示如果表单提交成功是否清除表单数据。
            success:function(msg){ //提交完后执行的函数
                if (msg.status == "error_1"){
                    alert("上传参数不完整");
                } else if (msg.status == "error_2"){
                    alert("书籍封面未上传");
                } else if (msg.status == "error_3"){
                    alert("书籍未上传");
                } else if (msg.status == "error_4"){
                    alert("图片格式有误,请重新上传");
                } else if (msg.status == "error_5"){
                    alert("图片文件太大,最多上传2M");
                } else if (msg.status == "error_6"){
                    alert("书本格式有误,只能是txtpdf格式。");
                } else if (msg.status == "error_7"){
                    alert("书籍太大,最多上传20M");
                } else if (msg.status == "error_8"){
                    alert("上传出错");
                } else if (msg.status == "error_9"){
                    alert("上传出错_2");
                } else if (msg.status == "success"){
                    alert("上传成功");
                } else {
                    alert("未知错误!");
                }
            }
        };

        $("#regform").ajaxSubmit(options); //使用ajaxForm()插件提交


}

这样,就可以实现图片和表单同步提交,

后台代码

@RequestMapping(value = "xx.html", method = RequestMethod.POST)
    public String register(HttpServletResponse response, HttpServletRequest request, ModelMap modelMap,@RequestParam(value = "wizard-picture", required = false)MultipartFile file){
        System.out.println("1111111111111111111111111111111111111111111111111111111111111111");
        System.out.println(file.getOriginalFilename());
        return null;
    }

上面的步骤已经完成了请求,如果你的页面不需要进行其他的验证,还有一种方式提交更加方便快捷。

再补充点其他的配置:

var options = {  
   target: '#output',          //把服务器返回的内容放入id为output的元素中      
   beforeSubmit: showRequest,  //提交前的回调函数  
   success: showResponse,      //提交后的回调函数  
   //url: url,                 //默认是form的action, 如果申明,则会覆盖  
   //type: type,               //默认是form的method(get or post),如果申明,则会覆盖  
   //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型  
   //clearForm: true,          //成功提交后,清除所有表单元素的值  
   //resetForm: true,          //成功提交后,重置所有表单元素的值  
   timeout: 3000               //限制请求的时间,当请求大于3秒后,跳出请求  
}  

 

© 著作权归作者所有

sprouting
粉丝 12
博文 155
码字总数 56113
作品 0
广州
程序员
私信 提问
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

[JQuery框架应用]:form.js官方插件介绍 Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。 1、JQuery框架软件包下载 2、Form插件下载 3、Form插件的简单入门 第一步:先...

孙斐
2011/12/14
0
0
经典风格的特效源码分享

特效源码分享,废话不多说,直接上源码。 仿hao123网址导航源码HTML整站下载 经典实用的风格,集时间日期、天气预报、邮箱登陆、搜索引擎、名站、酷站、实用工具、分类目录等常用模板,布局合...

牵着蜗牛去西藏
2014/11/14
624
7
Ajax传Form表单,包括上传文件

被这个问题困扰了好久。。。真是醉了 借用了jquery 的插件,jquery-form.js,链接:http://jquery.malsup.com/form/#download js代码(options包含很多参数,可以进行设置) <script type="tex...

_Roger_
2015/11/10
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Tedis:基于 TiKV 构建的 NoSQL 数据库

作者介绍: 陈东明,饿了么北京技术中心架构组负责人,负责饿了么的产品线架构设计以及饿了么基础架构研发工作。曾任百度架构师,负责百度即时通讯产品的架构设计。具有丰富的大规模系统构 ...

TiDB
16分钟前
0
0
linux命令

ls命令是linux下最常用的命令。ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单。如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单。 通过ls 命令不仅可以查看linux文件...

WinkJie
24分钟前
0
0
你需要的物流运输类报表,这里都有

你需要的物流运输类报表,都在这里 葡萄城报表模板库是一款免费的报表制作、学习和参考工具,包含了超过 200 张高质量报表模板,涵盖了 16 大行业和 50 多种报表类型,为 30 余万报表开发者提...

葡萄城技术团队
31分钟前
1
0
像Java SE一样编写Java EE(ddd探索)

今天主要改写昨天的组合模式成Web系统。 容器接口为 public interface TreeProduct { /** * 展示所有产品 * @return */ List<TreeProduct> allProducts();...

算法之名
32分钟前
0
0
Django Model 模型建立

Django Model 模型 Django Model层是Django的数据模型层,每一个Model类就是数据库中的一张表; 我们需要注意下面几点: model一般都是定义在不同的APP的models.py模块文件中,可以是一个,也...

彩色泡泡糖
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部