上传图片到服务器并保存路径到数据库

最新推荐文章于 2022-07-30 22:12:50 发布

原创最新推荐文章于 2022-07-30 22:12:50 发布 · 8.4k 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#上传图片

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了一种在Java后端实现图片上传至服务器，并将图片路径保存至数据库的方法。涵盖了前端页面设计、JS交互、Spring MVC配置及后端处理流程，确保图片上传的顺利进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传图片到服务器并保存路径到数据库

案例超多~~~但是完整的好像有点少，给自己记录一下下：

引入jar包

commons-fileupload-1.3.3.jar

修改spring-mvc.xml,大小根据实际需求进行设置

<!-- 设置文件上传大小 1G-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
        <property name="maxUploadSize" value="1073741824"/> 
    </bean>

jsp页面

img 是方便在上传的时候查看图片src 我设了默认值，你可以不设置直接为空

<img id="image" src="resources/images/default.png" style="width:358px; height:130px;"/>
<span><input type="file" name="file" id="file" onchange="selectImage(this);"></span>
<input type="button" value="上传" onclick="importWeldingMachine()" class="upButton"/>

js代码

var imgdata = '';
//选择文件
function selectImage(obj){
    var f=$(obj).val();
    if(f == null || f ==undefined || f == ''){
        document.getElementById('image').src = "";
        return false;
    }
    if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)){
        alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
        $(obj).val('');
        return false;
    }
    imgdata = new FormData();
    $.each($(obj)[0].files,function(i,file){
        imgdata.append('file', file);
    });
    if(!file.files || !file.files[0]){
        return;
    }
    //将上传的图片显示到页面
    var reader = new FileReader();
    reader.onload = function(evt){
        document.getElementById('image').src = evt.target.result;
        uploadfile = evt.target.result;
    }
    reader.readAsDataURL(file.files[0]);
}

var imageurl = "";
//上传
function importWeldingMachine() {
    var file = $("#file").val();
    if (file == null || file == "") {
        $.messager.alert("提示", "请选择要上传的文件！");
        return false;
    } else {
        $.ajax({
            type : "post",
            async : false,
            url : "wps/uploadimage",
            data : imgdata,
            cache : false,
            contentType : false, //不可缺
            processData : false, //不可缺,设置为true的时候,ajax提交的时候不会序列化 data，而是直接使用data
            dataType : "json", //返回数据形式为json  
            success : function(result) {
                if (result) {
                    if (!result.success) {
                        imageurl = "";
                        $.messager.show({
                            title : 'Error',
                            msg : result.errorMsg
                        });
                    } else {
                        imageurl = result.imgurl;
                        alert(imageurl);
                        $.messager.alert("提示", "图片上传成功！");
                    }
                }
            },
            error : function(errorMsg) {
                alert("数据请求失败，请联系系统管理员!");
            }
        });
    }

}

java后台代码

@RequestMapping("/uploadimage")
    @ResponseBody
    public String uploadPicture(@RequestParam(value = "file", required = false) MultipartFile file,
            HttpServletRequest request, HttpServletResponse response) {
        JSONObject obj = new JSONObject();
        File targetFile = null;
        String url = "";// 返回存储路径
        String fileName = file.getOriginalFilename();// 获取文件名加后缀
        if (fileName != null && fileName != "") {
            //文件存储位置
            ServletContext scontext = request.getSession().getServletContext();
            // 获取绝对路径
            String path = scontext.getRealPath("") + "excelfiles";
            String lastname = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
            fileName = new Date().getTime() + "_" + new Random().nextInt(1000) + lastname;//当前时间+随机数=新的文件名
            // 如果文件夹不存在则创建
            File pathfile = new File(path);
            if (!pathfile.exists()) {
                pathfile.mkdirs();
            }
            // 将图片存入文件夹
            targetFile = new File(path, fileName);
            try {
                // 将上传的文件写到服务器上指定的文件。
                file.transferTo(targetFile);
                obj.put("success", true);
                url = "excelfiles/" + fileName;//保存路径，便于后续存入数据库
            } catch (Exception e) {
                e.printStackTrace();
                obj.put("success", false);
                obj.put("errorMsg", e.getMessage());
            }
        }
        obj.put("imgurl", url);
        return obj.toString();
    }