基于springmvc实现头像上传、预览

我就是我 2022-05-10 03:26 400阅读 0赞

在做javaweb项目时，有时偶尔会用到用户头像上传和预览功能，百度了很多资料，发现学习成本比较高，要么是理解起来有点困难，必须加以深入研究才能吃透，但花费时间花费精力。要么是效果不尽人意。因此本人花了一些时间从前台到后台都是自己手写的，希望大家能满意！

头像上传即文件上传采用springmvc文件上传方案来解决，头像上传通常也需要预览功能，预览功能则通过js代码实现。

前端页面html代码：

<div id="box-1">
    	<img id="show-img" src="" alt=""/>
    </div>
    
    <div id="box-2">
    	<form action="/test_springmvc/user/getFile_2" method="post" enctype="multipart/form-data">
    		用户名：<input type="text" name="username"/><br>
    		<input id="choose-file" type="file" name="file" accept="image/*"/>
    		<input type="submit" value="提交"/>
    	</form>
    </div>

前端页面css代码：

<style type="text/css">
    	
    	#box-1{
          width: 200px;
          height: 200px;
          border: 1px solid gray;
          border-radius: 50%;
        }
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
          
        }
     
    </style>

前端页面js代码：

还要先引入jquery文件

<script type="text/javascript">
    	$(function(){
    		//在input file内容改变的时候触发事件
    	    $('#choose-file').change(function(){
    	    	//获取input file的files文件数组;
    	    	//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
    	    	//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
    	      	var file = $('#choose-file').get(0).files[0];
    	    	//创建用来读取此文件的对象
    	      	var reader = new FileReader();
    	    	//使用该对象读取file文件
    	      	reader.readAsDataURL(file);
    	    	//读取文件成功后执行的方法函数
    	      	reader.onload=function(e){
    	    		//读取成功后返回的一个参数e，整个的一个进度事件
    	        	console.log(e);
    	    		//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
    	    		//的base64编码格式的地址
    	        	$('#show-img').get(0).src = e.target.result;
    	      	}
    	    });
    		
    		//隐藏input file控件
    		$("#choose-file").hide();
    		
    		$("#box-1").bind('click',function(){
    			//当点击头像框时，就会弹出文件选择对话框
    			$("#choose-file").click();
    			
    		});
    		
    	});
    
    
    </script>

后台controller方法代码：

/**
    	 * springmvc文件上传：基于servlet3.0的文件上传
    	 */
    	@RequestMapping("/getFile")
    	@ResponseBody
    	public String getFile(String username,Part file) {
    		//将文件写到d盘根目录
    		try {
    			
    			String s=file.getHeader("Content-Disposition");
    			//分析字符串，获取上传的文件名称
    			s=s.substring(0,s.length()-1);
    			String fileName=s.substring(s.lastIndexOf("\"")+1, s.length());
    			
    			//保存文件
    			file.write("E://TestAll/"+fileName);
    			//清楚上传的临时文件
    			file.delete();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		return "文件上传成功！";
    	}

效果截图：

未选择头像时：

![70][]

点击头像框，弹出文件选择对话框，选择一张图片后：

![70 1][]

点击提交按钮，即可将头像上传到服务器！

[70]: /images/20220510/24fd1bd118ce45c88bf513cdc209f647.png
[70 1]: /images/20220510/d447a3b7a3234308b0c99509257d8190.png

发表评论取消回复

表情：

评论列表（有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 15 阅读

相关 [转]Django+jQuery cropper实现用户头像裁剪, 预览和上传

[Django+jQuery cropper实现用户头像裁剪, 预览和上传][Django_jQuery cropper_] [Django_jQuery cropper_

落日映苍穹つ/ 2023年06月06日 13:29/ 0 赞/ 272 阅读

相关【java】springMVC+eaui实现头像上传预览功能

功能需求描述 1. 需要一个能够显示员工头像的区域，点击区域可更新图片。 2. 图片为服务器文件存储（之所以不放到数据库中，为了防止数据库过大导致备份和迁移时效率降低

小鱼儿/ 2023年06月05日 15:59/ 0 赞/ 158 阅读

相关多文件预览上传基于Struts

多文件预览上传基于Struts 实现多文件预览，多文件上传，基于struts，使用jquery实现，逻辑简单转化为js等方便。页面代码 <ht

不念不忘少年蓝@/ 2022年08月21日 14:46/ 0 赞/ 241 阅读

相关头像上传剪裁预览功能js实现，以及Safari中一个坑。

先贴张图片，看看效果![效果图][SouthEast] 贴代码之前，先说一下坑吧。场景：点击button，隐藏的触发，选择需要上传的文件，但是在Safari下面，无法完

傷城~/ 2022年06月10日 11:16/ 0 赞/ 281 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 481 阅读

相关基于springmvc实现头像上传、预览

在做javaweb项目时，有时偶尔会用到用户头像上传和预览功能，百度了很多资料，发现学习成本比较高，要么是理解起来有点困难，必须加以深入研究才能吃透，但花费时间花费精力。要么是

我就是我/ 2022年05月10日 03:26/ 0 赞/ 401 阅读

相关 springmvc 实现动态头像上传

转自https://blog.csdn.net/luckey\_zh/article/details/46867957 转载于:https://www.cnblogs.com

深碍√TFBOYSˉ_/ 2021年12月20日 23:45/ 0 赞/ 381 阅读

相关点击头像按钮实现图片上传并预览

背景手机添加通讯录时，希望实现点击图片上传头像，这里主要包含两个功能 1. 将上传图片的input按钮替换为指定图片，点击图片是触发input的上传事件。 2.

淡淡的烟草味﹌/ 2021年12月11日 23:29/ 0 赞/ 883 阅读

相关 react antv实现图片上传预览

1、引入 import {Upload} from 'antd' 全局引入样式:import 'antd/dist/antd.css'

Bertha 。/ 2021年07月24日 23:32/ 0 赞/ 767 阅读