uploadFileUtils 20180816

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

先设置一个隐藏的表单域

<form id="saveForm" action="url" method="post" enctype="multipart/form-data">
        <input id="xxxb" type="file" name="fileupload"  style="display: none;"/>
    </form>

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

<div class="am-form-group"> 
    <label class="am-u-sm-3 am-form-label">图片：</label>
    <div class="am-u-sm-9">
        <input id="imgInput" type="hidden" name="refundImg" placeholder="请上传" value="${refundInfo.refundImg}"  />
        <img id="oopx" width="100px"  alt="pictures" src="imgurl"  onclick="showFile();"/>
    </div>
</div>

方法触发隐藏的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();

    }