模态框图片上传(好看)

1.首先在html页面的model中写如下代码:

<div>
	<label class="col-sm-4 ">广告图片:</label>
	<div class="col-sm-8">
		<img  id="carPicImg" name="carPicImg" width="100%" onclick="fileSelect()"/>
    </div>
 </div>
 <div id="fileDiv" hidden="hidden">
		<label class="col-sm-2 control-label">图片上传:</label>
    	 <div class="col-sm-10">
       	 	<input type="file" id="file" name="file" />
  		</div>
 </div>

2.在js中写：
//页面初始化：

$(document).ready(function () {
//模态框图片上传,选择图片,前台显示
	document.querySelector("#file").onchange = function(){
   	console.log(this.value);
    document.querySelector("#carPicImg").src = getFileUrl(this.id);
    searchList()
};
});

//列表回显部分代码：

var _columns = [
    {
        "data": "pic",
        render: function (data, type, row, meta) {
            if(data){
                return '<img src="'+getCarModelImgBaseUrl()+data+'" class="carPic" />';
            }else{
                return "——";
            }
        }
    },
    {
    data: 'commond',
    render: function (data, type, row, meta) {
        var btnStr = "";
        btnStr = btnStr + '<button type="button" class="btn btn-outline btn-info" style="margin-right: 15px" onclick="editModal(\'' + meta.row + '\')">编辑</button>';
        btnStr = btnStr + ' <button type="button" class="btn btn-outline btn-danger" onclick="doDel(\'' + meta.row + '\')">删除</button>';
        return btnStr;
    },
    "orderable" :false
}
];




function searchList() {
var adSupplier = $("#adSupplierSearch").val();
var searchArray = {
    "adSupplier":adSupplier
};

var buttons = [];
var columnOrder = {};
dataTableMain("advertisementTable","/advertisement/getAdList", _columns, buttons, searchArray,columnOrder);

}

//重点是以下函数

/*图片上传*/
//点击图片关联点击文件上传组件
function fileSelect(){
    $("#file").click();
}

//获取本地需上传的图片路径,预览所选图片
function getFileUrl(sourceId) {
    var url;
    if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
        url = document.getElementById(sourceId).value;
    } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    }
    return url;
}

function getCarModelImgBaseUrl(){
    return "http://39.105.31.168/shareCarPic";
}

3.在对应controller加

	 Map<String, Object> map = new HashMap<>();
	 String pic = "";
	 Map fileMap = uploadServiceImpl.upload(request, file);
	 if (fileMap != null && fileMap.size() > 0) {
		 pic = (String) fileMap.get("fileUrl");
	 }

contoller中全部代码

	 /**
     * 添加编辑
     */
    @RequestMapping(value = "/addAdList", method = RequestMethod.POST)
    @ResponseBody
    public JSONResult addSystemUser(HttpServletRequest request, TshareAdvertisement tshareAdvertisement, MultipartFile file) {
        try {
            Map<String, Object> map = new HashMap<>();
            String pic = "";
            Map fileMap = uploadServiceImpl.upload(request, file);
            if (fileMap != null && fileMap.size() > 0) {
                pic = (String) fileMap.get("fileUrl");
            }

            if (StringUtils.isEmpty(tshareAdvertisement.getId())) {
                //添加
                if (StringUtils.isEmpty(tshareAdvertisement.getAdSupplier())) {
                    return new JSONResult(null, 103, "请输入广告提供商");
                }
                tshareAdvertisement.setId(null);
                tshareAdvertisement.setAdSupplier(tshareAdvertisement.getAdSupplier());
                tshareAdvertisement.setCreateTime(new Date());
                tshareAdvertisement.setUpdateTime(new Date());
                tshareAdvertisement.setDelFlag("0");
                tshareAdvertisement.setUrl(pic);
                tshareAdvertisement.setPic(pic);
                tshareAdvertisementRepository.save(tshareAdvertisement);
            } else {
                //编辑
                Query query = new Query(Criteria.where("id").is(tshareAdvertisement.getId()));
                Update update = new Update();
                update.set("updateTime",new Date());
                update.set("url", pic);
                update.set("pic", pic);
                mongoTemplate.findAndModify(query, update, TshareAdvertisement.class);
            }

            return new JSONResult(map, 0, "成功");
        } catch (Exception e) {
            return new JSONResult(null, 101, "失败");
        }
    }

4.其中要写的upload类：

 //图片上传
    public Map<String, Object> upload(HttpServletRequest request, MultipartFile file) {
        Map<String, Object> map = new HashMap<String, Object>();
        try {
            if (file == null) {
                throw new IllegalArgumentException("参数异常");
            }
            String filePath = request.getSession().getServletContext().getRealPath("/") + "static/upload/";
            //创建上传目录
                //String filePath ="/static/upload/";

            Date time = new Date();
            SimpleDateFormat myFmt = new SimpleDateFormat("yyyy-MM-dd");
            String subPath = myFmt.format(time);
            filePath = filePath + subPath;

            File targetFolder = new File(filePath);
            if (!targetFolder.exists()) {
                targetFolder.mkdirs();
            }
        //生成文件名称
            String name = file.getOriginalFilename();
            String fileName = DigestUtils.md5Hex(time.getTime() + name.substring(0, name.lastIndexOf('.'))) + "." + name.substring(name.lastIndexOf(".") + 1);

       //创建接收对象
            File targetFile = new File(filePath, fileName);
        //保存
            BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(targetFile));
            out.write(file.getBytes());
            out.flush();
            out.close();
            String fileUrl = "/static/upload/" + myFmt.format(time) + "/" + fileName;
            map.put("fileUrl", fileUrl);
        LOGGER.info("上传了" + targetFolder + " " + fileName);
        return map;
    } catch (Exception e) {
        return map;
    }

}

finish!