使用ajaxfileupload实现文件上传，使用FileReader实现预览效果（图片）

最新推荐文章于 2025-07-24 15:22:31 发布

yven_style

最新推荐文章于 2025-07-24 15:22:31 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： springMVC jsp JavaScript

本文链接：https://blog.youkuaiyun.com/yangwen123222/article/details/79861815

JavaScript 同时被 3 个专栏收录

48 篇文章

订阅专栏

springMVC

12 篇文章

订阅专栏

jsp

12 篇文章

订阅专栏

本文介绍了一个文件上传的功能实现，包括前端的文件预览、类型及数量限制，以及后端的文件处理与数据库保存。

前端源码：

<%@page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!doctype>
<html>
<head>
<style type="text/css">

.b_t_i{
	margin:5px
}

</style>
</head>
<body>
	<!-- <img id="image" src="" /> -->
	<div id="imageArea" ></div>
	<br />
	<input type="file" id="uploadFile" name="uploadFile" onchange="selectImage(this);" class="b_t_i" multiple/>
	<br />
	<input type="button" id="uploadImageBtn" onclick="uploadImage();" value="提交" class="b_t_i" disabled/>
	<input type="button" onclick="clearImage();" value="清除" class="b_t_i"/>
	<script>
		var image = '';
		function selectImage(file) {
			// 上传按钮可用
			$("#uploadImageBtn").attr("disabled",false);
			//清除上一次的图片
			$("#imageArea").html("");
			
			if (!file.files || !file.files[0]) {
				return;
			}
			
			var fileLength = file.files.length;
			//限制数量为8
			if(fileLength > 8){
				clearImage();
				alert("请重新选择，最多添加8个文件！")
				return
			}
			// 验证格式
			for(var i = 0 ; i < fileLength ; i++){
				if(!checkPicture(file.files[i])){
					clearImage();
					alert("请上传  .jpg .png .gif .bmp类型的图片文件")
					return
				}
			}
			// 图片预览（解决js闭包问题）
			for(var i = 0 ; i < fileLength ; i++){
				(function(i){
					var reader = new FileReader();
					reader.onload = function(evt) {
						/* document.getElementById('image').src = evt.target.result; */
						var imag = $("<img>").attr("id","image"+i).attr("src",evt.target.result).attr("style","width:44%;margin:2%");
						$("#imageArea").append(imag)
						image = evt.target.result;
					}
					reader.readAsDataURL(file.files[i]);
				})(i)
			}
		}
		// 文件上传
		function uploadImage() {
			$.ajaxFileUpload({
		        //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
		        url:"../repair_apply/uploadfile",
		        secureuri:false,                           //是否启用安全提交,默认为false 
		        fileElementId:'uploadFile',               //文件选择框的id属性
		        dataType:'JSON',                           //服务器返回的格式,可以是json或xml(需要大写)等     text
		        success:function(data, status){            //服务器响应成功时的处理函数
		            data = data.replace(/<pre.*?>/g, ''); // ajaxFileUpload会对服务器响应回来的text内容加上
		            data = data.replace("</pre>", ''); // 本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
		            data = eval("("+data+")");
		        	if (data.success) {
		        		clearImage();
		        		alert("上传成功")
		        			
		            } else  {
		            	alert("文件为空，请重新上传！")
		            }
		        },
		        error:function(data, status, e){ //服务器响应失败时的处理函数
		           alert("上传失败");
		        }
		    }); 
		}
		
		function clearImage(){
			$("#uploadFile").val("");
			$("#imageArea").html('');
			//  上传按钮不可用
			$("#uploadImageBtn").attr("disabled",true);

		}
		//文件类型限制
		function checkPicture(file){
			return /.(jpg|png|gif|bmp|JPG|PNG|GIF|BMP)$/.test(file.name)?true:false;
		}
		
	</script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajaxfileupload.js"></script>

</body>
</html>

后端源码，springmvc框架（非完整）：

@RequestMapping(value = "/uploadfile")
	public ResponseEntity<Map<String, Object>> uploadHandbook(@RequestParam("uploadFile") MultipartFile[] upfileInfo,
			HttpServletRequest request, HttpServletResponse response) throws IOException {
		Map<String, Object> resultMap = new HashMap<String, Object>();
		boolean resultFlag = true;
		int countFile = upfileInfo.length;//统计文件的数量
		String uploadtype = "cm_repair_apply";
//		String basePath = "d:/upload/" + uploadtype + "/";
		String basePath  = "upload/" + uploadtype ;
		String[] originalFilename = new String[countFile];
		for(int i = 0 ; i < countFile ; i++){
			if (!upfileInfo[i].isEmpty()) {
				
				originalFilename[i] = upfileInfo[i].getOriginalFilename();
				try {// 将文件保存到本web项目下的目录中
					String result = upload(basePath, request, upfileInfo[i]);
					logger.info("文件存储的路径:{}" , result);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}else{
				//存在空文件
				resultFlag = false;
			}
		}
		// 将文件的相关信息保存到数据库
		RepairFile repairfile = new RepairFile();// 新建实体类
		repairfile.setFileName(StringUtils.join(originalFilename, ","));// 文件名，多个文件用逗号隔开
		repairfile.setFilePath(basePath);// 文件地址
		try {
			repairFileService.add(repairfile);// 将name和path保存到数据库
			logger.info("数据库保存文件后的id：{}",repairfile.getId());
		} catch (ServiceException e) {
			e.printStackTrace();
		}
		if(resultFlag){// 相关数据传到前端
			resultMap.put("filePath", basePath);
			resultMap.put("fileName", originalFilename);
			resultMap.put(PublicConstants.SUCCESS_KEY, true);
			resultMap.put("count", countFile);
		}else{
			resultMap.put(PublicConstants.SUCCESS_KEY, false);
		}
		
		return new ResponseEntity<Map<String, Object>>(resultMap, HttpStatus.OK);
	
		}

文件存储，这里是将文件保存到web项目中的文件下，在前端就可以使用<img src="保存路径">访问图片。

	public static String upload(String uploadPath, HttpServletRequest request, MultipartFile file) throws Exception {
		// 1、获取上传的文件
//		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//		MultipartFile file = multipartRequest.getFile("file");
		String fileName = file.getOriginalFilename();
		if(StringUtils.isEmpty(fileName)){
			return null;
		}
		// 2、进行保存上传
		String uploadRealPath = request.getSession().getServletContext().getRealPath(uploadPath);
		File directory = new File(uploadRealPath);
		judeDirExists(directory);
		File uploadFile = new File(uploadRealPath + "/" +fileName);
		file.transferTo(uploadFile);
		// 3、返回上传访问文件的路径
		return "/" + uploadPath + "/" + fileName;
	}
	/**
	 * 判断文件夹是否存在
	 * @param file
	 */
	public static void judeDirExists(File file){
		if(!file.exists()){
			file.mkdir();
		}else{
			return;	
			}
		}

功能：1、文件数量限制；2、类型限制；3、后端可将上传的文件保存到数据库（可以按照自己需求自行修改）

未添加图片显示效果：