uploadFileUtils 20180816

记录一下用图片覆盖上传按钮的过程。前端太繁杂总是会忘。

先设置一个隐藏的表单域

修饰的点击图片，在图片上添加单击事件

 
    图片：
    

        
        
    

方法触发隐藏的input单击事件

function showFile() {
        $("#xxxb").click();
    }

添加关键上传方法,ajax返回imgPath用于回显，fileName是存储时的文件名

$("#xxxb").change(function () {
            var form = document.getElementById('saveForm'),
                formData = new FormData(form);
            $.ajax({
                url: "url",
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (result) {
                    var temp = $.parseJSON( result);
                    $("#imgInput").val(temp.fileName);
                    $("#oopx").attr("src", temp.imgPath);

                }
            })
            $('#xxxb').val('');
        });

后端

 

controller 处理请求

@ResponseBody
    @RequestMapping(value = "/uploadImage",method = RequestMethod.POST)
    public String uploadRefundImage(@RequestParam("fileupload") MultipartFile file, HttpServletRequest request) throws Exception {
        JSONObject jsonObject=new JSONObject();
        ZimgUploadUtil zimgUploadUtil=new ZimgUploadUtil();
        if (null != file) {
            String img = zimgUploadUtil.uploadImgToZimg(file);
            jsonObject.put("fileName",img);
            jsonObject.put("imgPath", img);
        }
        return jsonObject.toJSONString();

    }