layui实现form表单同时提交数据和文件


js代码

    //上传头像的方法
    var uploadInst = upload.render({
        elem: '#test1'     /*根据绑定id,打开本地图片*/
        ,url: '/reg'  /*上传后台接受接口*/
        ,auto: false        /*true为选中图片直接提交,false为不提交根据bindAction属性上的id提交*/
        ,bindAction: '#get'
        ,drag:true
        ,auto: false
        ,choose:function(obj){
            //预读本地文件示例,不支持ie8
            obj.preview(function(index, file, result){
                $('#photo').attr('src', result); //图片链接(base64)
            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功
        }
        ,error: function(){
            //演示失败状态,并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });
	//提交表单的方法
	 form.on('submit(reg)', function (data) {
        var fd = new FormData();
        var formData = new FormData($( "#userForm" )[0]);
        $.ajax({
            cache : true,
            type : "post",
            url : "/reg",
            async : false,
            data : formData,  // 你的formid
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
            error : function(request) {
                layer.alert('操作失败', {
                    icon: 2,
                    title:"提示"
                });
            },
            success : function(ret) {
                if (ret.success) {
                    layer.alert('注册成功', {
                        icon: 2,
                        title:"提示"
                    });
                    layer.closeAll();
                    window.location.href="/login";
                } else {
                    layer.alert(ret.msg, {
                        icon: 2,
                        title:"提示"
                    });
                }
            }
         })
    });

后台代码

@ResponseBody
@RequestMapping ("/reg")
public JsonResult save(MultipartFile file, User user, HttpServletRequest request){
    try {
        String path = request.getSession().getServletContext().getRealPath("upload");
        String pathPhoto = "/upload";
        if(!file.isEmpty()){
            String name = file.getOriginalFilename();//获取接受到的图片名称
            String newFileName = UUID.randomUUID().toString().substring(0,5)+"."+ FilenameUtils.getExtension(name);
            File fi = new File(path,newFileName);       //将path路径与图片名称联系在一起
            if(!fi.getParentFile().exists()){    //判断是否存在path路径下的文件夹
                fi.getParentFile().mkdirs();       //不存在创建path路径下的文件夹
            }
            file.transferTo(fi);                        //上传图片
            user.setImgurl(pathPhoto+"/"+newFileName);   //为保存图片路径
        }
        if(!StringUtil.isEmpty(user.getName()) && !StringUtil.isEmpty(user.getPassword())){
            userService.save(user);
        }
    } catch (Exception e) {
        e.printStackTrace();
        return new JsonResult(false,e.getMessage());
    }
    return new JsonResult();
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM