图片上传到本地并显示上传的图片——HTML+JS+JAVA代码详解

前端页面

form表单进行一个设置

 <form action="" method="post" enctype="multipart/form-data">
            <div class="content-down">
                <div class="image-div">
                    <div class="image-title">
                        上传封面图片
                    </div>
                    <input type="file" class="image-input01" name="image01" id="image01" onchange="setinImagePreview(this)"  accept="image/png,image/jpeg,image/jpg" />
                    <div class="image-content" >
                        <img id="image_show01" src="/default/img/kong.jpg">
                    </div>
                </div>
                <div class="image-div">
                    <div class="image-title">
                        上传描述图片01
                    </div>
                    <input type="file" class="image-input" name="image02" id="image02"  onchange="setinImagePreview(this)" accept="image/png,image/jpeg,image/jpg" />
                    <div class="image-content" >
                        <img id="image_show02" src="/default/img/kong.jpg">
                    </div>
                </div>
                <div class="image-div">
                    <div class="image-title">
                        上传描述图片02
                    </div>
                    <input type="file" class="image-input" name="image03" id="image03"  onchange="setinImagePreview(this)" accept="image/png,image/jpeg,image/jpg" />
                    <div class="image-content" >
                        <img id="image_show03" src="/default/img/kong.jpg">
                    </div>
                </div>
                <div class="image-div">
                    <div class="image-title">
                        上传描述图片03
                    </div>
                    <input type="file" class="image-input" name="image04" id="image04"  onchange="setinImagePreview(this)" accept="image/jpg,image/jpeg,image/png,image/PNG" />
                    <div class="image-content" >
                        <img id="image_show04" src="/default/img/kong.jpg">
                    </div>
                </div>
            </div>
            </form>

JS响应:图片上传后在前台页面展示

function setinImagePreview(obj) {
    var file_id = document.getElementById(obj.id);
    console.log(obj.id);
    console.log(file_id);
    var imgUrl =window.URL.createObjectURL(file_id.files[0]);
    var image_div_id = "image_show" + obj.id.substring(obj.id.indexOf("0"));
    console.log(image_div_id);
    var image_div = document.getElementById(image_div_id);
    image_div.setAttribute('src',imgUrl);
}

JS响应:上传到后端进行处理

addCommodity是onclick响应事件

function addCommodity() {
    var commodity_name = $("#commodity_name").val();
    var commodity_price = $("#commodity_price").val();
    var commodity_total = $("#commodity_total").val();
    var classify = $("#classify").val();
    var create_time = new Date().getTime();
    var update_time = new Date().getTime();
    var formData = new FormData();
    formData.append("commodity_name", commodity_name);
    formData.append("commodity_price", commodity_price);
    formData.append("commodity_total", commodity_total);
    formData.append("classify", classify);
    formData.append("create_time", create_time);
    formData.append("update_time", update_time);
    var file01 = document.getElementById("image01").files[0];
    var file02 = document.getElementById("image02").files[0];
    var file03 = document.getElementById("image03").files[0];
    var file04 = document.getElementById("image04").files[0];
    formData.append("file01", file01, file01.name);
    formData.append("file02", file02, file02.name);
    formData.append("file03", file03, file03.name);
    formData.append("file04", file04, file04.name);
    $.ajax({
        type: 'POST',
        data: formData,
        processData: false, //必须false才会自动加上正确的Content-Type
        dataType: 'json',
        url: '/xcn_merchant/addCommodity',
        contentType: false,//必须false才会避开jQuery对 formdata 的默认处理
        success: function (json) {
            json = typeof json == 'string' ? JSON.parse(json) : json;
            if (json.code == 200) {
                alert(json.msg);
            } else {
                alert(json.msg);
            }
        },
        error: function (json) {
            json = typeof json == 'string' ? JSON.parse(json) : json;
            alert(json.msg);
        }
    });
}

Java接收前端传来的文件信息

 /**
     * 添加商品
     */
    @PostMapping(value = "/addCommodity")
    @ResponseBody
    public String addCommodity(
            HttpServletRequest request,
            @RequestParam String commodity_name,
            @RequestParam String commodity_price,
            @RequestParam String commodity_total,
            @RequestParam String classify,
            @RequestParam String create_time,
            @RequestParam String update_time,
            @RequestParam(value = "file01") MultipartFile file01,
            @RequestParam(value = "file02") MultipartFile file02,
            @RequestParam(value = "file03") MultipartFile file03,
            @RequestParam(value = "file04") MultipartFile file04
    ) throws IOException {
        JSONObject admin = mainPublicComponetAdmin.getAdminInfo(request);
        if (admin != null) {
            if (file01.isEmpty() || file02.isEmpty() || file03.isEmpty() || file04.isEmpty()) {
                return failReturn("文件为空，上传失败，请重新上传");
            }
            HashMap params = new HashMap();
            String commodity_id = KeyWorker.nextId() + "";
            String image01_id = KeyWorker.nextId() + "";
            String image02_id = KeyWorker.nextId() + "";
            String image03_id = KeyWorker.nextId() + "";
            String image04_id = KeyWorker.nextId() + "";
            String remark_id = KeyWorker.nextId() + "";
            String filePath_master = "classify/" + classify + "/" + commodity_id;
            File path_master = new File(RootPath + filePath_master);
            if (!path_master.exists()) {
                path_master.mkdir();
            }
            String filePath_slave = filePath_master + "/commodity_list";
            File path_slave = new File(RootPath + filePath_slave);
            if (!path_slave.exists()) {
                path_slave.mkdir();
            }
            String image01_url = path(file01, image01_id, filePath_master);
            String image02_url = path(file02, image02_id, filePath_slave);
            String image03_url = path(file03, image03_id, filePath_slave);
            String image04_url = path(file04, image04_id, filePath_slave);

            //公共params信息
            params.put("commodity_id", commodity_id);
            params.put("merchant_id", admin.getString("id"));
            JSONObject store = xcnMerchantServiceMerchant.selectStoreById(params);
            params.put("store_id", store.getString("store_id"));
            params.put("classify", classify);
            params.put("is_delete", "0");
            params.put("create_time", create_time);
            params.put("update_time", update_time);

            //image01——params——主图
            HashMap params_commodity = new HashMap();
            params_commodity.put("commodity_name", commodity_name);
            params_commodity.put("commodity_price", commodity_price);
            params_commodity.put("sales_total", "0");
            params_commodity.put("commodity_total", commodity_total);
            params_commodity.put("image_id", image01_id);
            params_commodity.put("image_url", image01_url);
            params_commodity.put("remark_id", remark_id);
            params_commodity.putAll(params);

            //image02——params——附图1
            HashMap params_image02 = new HashMap();
            params_image02.put("image_id", image02_id);
            params_image02.put("image_url", image02_url);
            params_image02.putAll(params);

            //image03——params——附图2
            HashMap params_image03 = new HashMap();
            params_image03.put("image_id", image03_id);
            params_image03.put("image_url", image03_url);
            params_image03.putAll(params);

            //image04——params——附图3
            HashMap params_image04 = new HashMap();
            params_image04.put("image_id", image04_id);
            params_image04.put("image_url", image04_url);
            params_image04.putAll(params);
            int i = xcnMerchantServiceMerchant.addCommodityOne(params_commodity, params_image02, params_image03, params_image04);
            if (i >= 1) {
                File image01 = new File(RootPath + image01_url);
                file01.transferTo(image01);
                File image02 = new File(RootPath + image02_url);
                file02.transferTo(image02);
                File image03 = new File(RootPath + image03_url);
                file03.transferTo(image03);
                File image04 = new File(RootPath + image04_url);
                file04.transferTo(image04);
                return success("添加商品成功");
            } else {
                return failReturn("添加失败，请检查信息重新添加");
            }
        } else {
            return failReturn("登录失效，请重新登录");
        }

    }
      /**
     * 小小的方法，处理主图片名称变为image_id名称
     *
     * @param image_id
     * @param RootPath
     * @return
     */
    public String path(MultipartFile file, String image_id, String RootPath) {
        String fileName = file.getOriginalFilename();
        String image_name = image_id + fileName.substring(fileName.indexOf("."));
        String path = RootPath + "/" + image_name;
        return path;
    }

关键在于处理图片路径和使用MultipartFile 的transferTo方法把图片保存到本地。