前端页面上实现表单提交文件上传功能

提示：新手刚刚初学java，希望和大家多多交流

---

前言

在页面上实现文件的上传功能

---

一、文件上传的三要素是什么？

文件上传的三要素：
1.表单post请求
2.input框的type=file
3.在form表单中添加enctype=“multipart/form-data”

二、具体使用步骤

1.前端页面代码

代码如下（示例）：

<form action="/" method="post"
						class="form-horizontal" id="saveForm"
						enctype="multipart/form-data">							
						<div class="form-group row">
							<label for="title" class="control-label col-md-2">图片上传</label>
							<div class="col-md-10">
								<input class="form-group" name="photo" type="file" />
							</div>
						</div>
						<div class="form-group row">
							<label for="title" class="control-label col-md-2">视频上传</label>
							<div class="col-md-10">
								<input class="form-group" name="media" type="file" />
							</div>
						</div>										
					</form>

input框中的type属性等于file
form表单必须是post请求
form表单必须添加enctype=“multipart/form-data”

2.后台代码接收

代码如下（示例）：

@RequestMapping("/")
	@ResponseBody
	public AjaxResult save(Vedio vedio, HttpServletRequest request, MultipartFile photo,MultipartFile media) {
		// System.out.println(article);
		System.out.println(vedio);
		try {
			service.save(vedio, request, photo,media);
			return new AjaxResult();
		} catch (Exception e) {
			// TODO: handle exception

			e.printStackTrace();
			return new AjaxResult(false, "操作失败");
		}

	}

这里需要注意的是，这里方法参数必须使用MultipartFile类型 参数名必须和前端页面中input框的name属性值一致

3.在springMVC的配置文件中添加文件上传解析器

<!-- 文件上传配置 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!--

    defaultEncoding：请求的编码格式必须和用户JSP的编码一致，以便正确读取表单中的内容。
    uploadTempDir:文件上传过程中的临时目录，上传完成后，临时文件会自动删除
    maxUploadSize:设置文件上传大小上限（单位为字节）-1为无限制

  -->
  <property name="defaultEncoding" value="UTF-8" />
  <property name="maxUploadSize" value="102400000" />
  <!-- uploadTempDir可以不做设置，有默认的路径，上传完毕会临时文件会自动被清理掉 -->
  <property name="uploadTempDir" value="/upload/"></property>
</bean>

4.在服务层实现对文件的上传功能的封装

public static void gofile(HttpServletRequest request,MultipartFile mFile,Vedio vedio,String p){
         // 获取文件存放的绝对路径
		String path = request.getServletContext().getRealPath(p);
		if (mFile!=null) {			
			
			// System.out.println(path);
			// 判断该文件夹是否存在
			File file = new File(path);
			if (!file.exists()) {
				//创建文件夹
				file.mkdir();
			}
			// 获取需要上传文件的文件名
			String originalFilename = mFile.getOriginalFilename();
			// System.out.println(originalFilename);
			// 只需要截取改文件名的后缀
			String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
			// System.out.println(suffix);
			// 生产新的文件名字
			long currentTimeMillis = System.currentTimeMillis();
			String fileName = currentTimeMillis + "" + suffix;
			// 创建输入输出流
			InputStream in = null;
			try {
				in = mFile.getInputStream();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			FileOutputStream out = null;
			try {
				out = new FileOutputStream(new File(path, fileName));
			} catch (FileNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			// 文件拷贝
			try {
				IOUtils.copy(in, out);
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			// 关流
			try {
				in.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} finally {
				
				try {
					out.close();
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
	}

---

总结

注意：

本文仅仅简单介绍了文件的上传功能在SSM框架中的使用，使用文件上传下载功能需要在SpringMVC配置文件中配置文件上传解析器
在前端表单中需要post请求 ，添加enctype="multipart/form-data"属性
在后端使用MultipartFile 类型 参数名必须和前端中的input中的name属性值一致。

最后，希望有帮助到你！愿你学习愉快！