图片上传不提交后台回显,后台使用MultipartFile接收

图片上传不提交前端回显

<td >
	<img id="" src=""  >
</td>
<td >
    <input type="file" id="" name="file" onchange="previewFile(this)">
</td>
    //图片上传
    function previewFile(obj) {
        var preview = $(obj).parent().prev().children("img")[0];
        var file  = obj.files[0];
        var reader = new FileReader();
        reader.onloadend = function (evt) {
            //回显图片
            preview.src = reader.result;
        }
        if (file) {
            reader.readAsDataURL(file);
            //上传图片
            var formData = new FormData();
            formData.append("file",file);
            $.ajax({
                type: "POST", // 数据提交类型
                url: "", // 发送地址
                data: formData, //发送数据
                async: true, // 是否异步
                processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                contentType: false,
                success:function(data){
                    if (data.code == 0) {
                        parent.layer.msg("操作成功");
                    } else {
                        parent.layer.msg(data.msg);
                    }
                }
            });
        } else {
            preview.src = "";
        }
    }
	@RequestMapping("/")
    public void uploadInfo(MultipartFile file) throws  Exception{
        
    }

猜你喜欢

转载自blog.csdn.net/qq_43639296/article/details/86640665