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

最新推荐文章于 2022-04-20 09:05:00 发布

weixin_34306446

最新推荐文章于 2022-04-20 09:05:00 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/sprouting/blog/1359279

本文介绍了一种在Web开发中实现图片与表单信息同时提交的方法，通过使用jQuery-form.js插件，解决了传统AJAX无法处理文件上传的问题，并提供了前后端代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

项目中有一个注册功能，需要用户图片和表单信息一同提交到后台，直接使用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, //提交前处理的函数，也可以在这里写,注意，这里接收的只能是false和true，且不能是函数的名带括号的
            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("书本格式有误，只能是txt与pdf格式。");
                } 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秒后，跳出请求  
}

转载于:https://my.oschina.net/sprouting/blog/1359279