SSM在表单中上传单个文件的处理办法

在pom.xml中引入依赖配置

<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.2</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.5</version>
		</dependency>

在springMVC配置文件中添加如下配置

<!-- springMVC文件上传 -->
	<!-- 定义文件上传解析器 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <property name="defaultEncoding">
      <value>UTF-8</value>
   </property>
   <property name="maxUploadSize">
      <value>32505856</value><!-- 上传文件大小限制为31M,31*1024*1024 -->
   </property>
   <property name="maxInMemorySize">
      <value>4096</value>
   </property></bean>

在前面jsp页面中添加表单,包含文件上传控件

<form action="<%=editMemberUrl%>" id="myform" method="post"
		enctype="multipart/form-data" >
<div class="col-md-5">
<input class="" type="file" name="file" /> 
<input type="hidden"	name="pic1" id="coverImg1" value="${member.pic1 }" /> 
<input	type="button" value="上传" onclick="upload()" /> 
<img id="coverImg2" src="${member.pic1 }" style="width: 50px; height: 50px;" />
</div>
</form>

添加ajax请求

<script>		
		function upload() {
			alert("开始上传文件!")
			var formData = new FormData(document.getElementById("myform"));
			$.ajax({
				url : "${ctx}/file/upload.html",
				type : "post",
				data : formData,
				processData : false,
				contentType : false,
				success : function(data) {
					if (data != "0") {
						alert("上传成功:" + data);						
							$('#coverImg1').val(data);
							$('#coverImg2').attr("src", "${ctx}/" + data);		
					} else {
						alert("上传失败")
					}
				}
			});
		}
	</script>

添加文件上传控制类

@Controller
@RequestMapping("/file")
public class FileUploadController {
//ajax单个文件上传,返回json串
	@ResponseBody
	@RequestMapping("/upload")
	public String fileupload3(HttpServletRequest req, @RequestParam("file") MultipartFile myfile)
			throws IOException, ServletException {
		System.out.println("文件上传测试。。。" + myfile);
		if (!myfile.isEmpty()) {
			String name = myfile.getOriginalFilename();
			String suffix = name.substring(name.lastIndexOf("."), name.length());

			String filename = UUID.randomUUID() + suffix;
			System.out.println(filename);
			InputStream is = myfile.getInputStream();

			String serverpath = req.getSession().getServletContext().getRealPath("/upload");
			System.out.println("服务器路径:" + serverpath);
			FileOutputStream fos = new FileOutputStream(serverpath + File.separator + filename);

			byte[] bty = new byte[4096];
			int length = 0;
			while ((length = is.read(bty)) != -1) {
				fos.write(bty, 0, length);
			}
			fos.close();
			is.close();
			req.setAttribute("file", "upload" + File.separator + filename);
			//return  "upload/success";
			return "upload" + File.separator + filename;
		}
		//return "upload/fail";
		return "0";
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSM 框架实现文件上传功能一般需要以下步骤: 1. 在前端页面添加文件上传表单,例如: ```html <form action="文件上传处理的 URL" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="上传"> </form> ``` 2. 在后端代码编写文件上传处理逻辑,一般包括以下步骤: - 创建一个 MultipartFile 对象,该对象包含上传文件数据; - 获取文件名和文件类型等信息; - 指定文件上传保存的路径; - 将文件保存到指定路径。 以下是一个简单的文件上传处理的示例代码: ```java @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody public String upload(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { // 文件为空,返回错误信息 return "上传文件不能为空"; } String fileName = file.getOriginalFilename(); // 获取文件名 String fileType = fileName.substring(fileName.lastIndexOf(".") + 1); // 获取文件类型 String filePath = "文件上传保存的路径"; // 指定文件保存的路径 try { // 将文件保存到指定路径 File dest = new File(filePath + fileName); file.transferTo(dest); // 返回上传成功信息 return "上传成功"; } catch (IOException e) { e.printStackTrace(); // 返回上传失败信息 return "上传失败"; } } ``` 对于图片上传处理,除了上述步骤外,还需要在前端页面添加图片预览功能,例如: ```html <form action="文件上传处理的 URL" method="post" enctype="multipart/form-data"> <input type="file" name="file" onchange="previewImage(this)"> <img id="preview" src="" style="display:none"> <input type="submit" value="上传"> </form> <script> function previewImage(fileInput) { var preview = document.getElementById("preview"); var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function (e) { preview.src = e.target.result; preview.style.display = "block"; }; reader.readAsDataURL(file); } </script> ``` 这样上传图片时,用户就可以在选择图片后实时预览图片,提高用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值