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