欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

java实现前端+后端上传图片并回显(ssm)

程序员文章站 2024-01-20 08:31:52
...

效果:第一步的图片回显,点击保存才是上传

java实现前端+后端上传图片并回显(ssm)

1、需要两个jar包

加入两个jar包,commons-fileupload-1.3.jar、commons-io-1.2.jar

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
		<dependency>
		    <groupId>commons-fileupload</groupId>
		    <artifactId>commons-fileupload</artifactId>
		    <version>1.3</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>1.2</version>
		</dependency>

2、在配置文件applicationContext.xml加上以下配置

<!-- 定义文件解释器(文件上传) -->    
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">      
    <!-- 设置默认编码 -->    
    <property name="defaultEncoding" value="utf-8"></property>    
    <!-- 上传图片最大大小1M-->     
    <property name="maxUploadSize" value="1048576"></property>      
</bean> 

3、首先看前端代码:

src里面的内容是我的用户的头像的url

<div>
            <p>(点击头像开始选择新头像)</p><br>
            <p >
                <img class="user-header" style="width: 100px;height: 100px;object-fit: cover;" src="${imgUser.data.userProfilePhoto}">
            </p>
            <br>
            <form id="test">
            <input type="file" name=file onchange="imgChange(event)" id="file" style="display: none"/>
            </form>        
            <button data-role="none" onclick="testUpload();" class="btn btn-info">保存头像</button>  
        </div>

4、这里的两个方法可以实现将你要上传的图片先回显

function imgChange(e) {
        console.info(e.target.files[0]);//图片文件
        console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                $('.user-header').attr('src',this.result);
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }
    
    $('.user-header').click(function () {
        $("#file").click();
    });

5、这个方法实现将图片信息发送到后台:

我因为要更新用户的头像,所以将用户id一起传过去

    function testUpload(){
 	var form = new FormData();
 	form.append('id',${imgUser.data.userId});
	form.append('file',$("#file")[0].files[0]);
 	$.ajax({
 	url:"/u/img",
 	data:form,
 	type:"POST",
 	processData:false,  
    contentType:false,  
    success : function(result){  
        if(result.status==200){
        	alert("成功") 
        }else{
        	alert(result.msg);
        } 
    }, 
 	});
 }

6、后台代码

@RequestMapping("/u/img")
	@ResponseBody
	 public E3Result test(MultipartFile file,HttpServletRequest request,long id) throws IOException{  
        String path = request.getSession().getServletContext().getRealPath("/images");  
        System.out.println("路径:"+path);  
  
        String fileName = file.getOriginalFilename();  
        System.out.println("文件名称"+fileName);  
          
        File dir = new File(path, fileName);  
        System.out.println("判断目录是否存在:"+dir.exists());  
        if(!dir.exists()){  
            dir.mkdirs();  
        }  
//      MultipartFile自带的解析方法  
        file.transferTo(dir);  
        
        //这里我在拼接出我图片要显示的url
        String imageurl = "http://localhost:8089/images/"+fileName;
        //将数据库中信息更新
        BUsers bUser = new BUsers();
        bUser.setUserId(id);
        bUser.setUserProfilePhoto(imageurl);
        E3Result result = getUserInfoService.updateUser(bUser);
        //返回结果
        return result;
    }  

7、测试完成

图片在你的tomcat 的webapps下的images目录里面