当前位置: 首页 > 编程笔记 >

利用SpringMVC和Ajax实现文件上传功能

公西毅
2023-03-14
本文向大家介绍利用SpringMVC和Ajax实现文件上传功能,包括了利用SpringMVC和Ajax实现文件上传功能的使用技巧和注意事项,需要的朋友参考一下

个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能:

环境:

1.JDK1.7

2.maven3.3.9

3.Tomcat7

第一步:

导入相关jar包:

第二步:

配置springmvc-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
 xmlns:context="http://www.springframework.org/schema/context"
 xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd">
 
 <context:component-scan base-package="com.lc" />
 
 <!-- 配置视图解析器 -->
 <bean id="viewResolver"
 class="org.springframework.web.servlet.view.InternalResourceViewResolver">
 <property name="prefix" value="/WEB-INF/page/"></property>
 <property name="suffix" value=".jsp"></property>
 </bean>
 
 
 <bean id="multipartResolver"
 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 <!--上传文件的最大大小 -->
 <property name="maxUploadSize" value="17367648787"></property>
 <!-- 上传文件的编码 -->
 <property name="defaultEncoding" value="UTF-8"></property>
 </bean>
 
</beans>

第三步:

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 id="WebApp_ID" version="3.1">
 <display-name>fileupload</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <!--Springmvc的控制分发器 -->
 <servlet>
 <servlet-name>springDispatcherServlet</servlet-name>
 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
 <init-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:springmvc-config.xml</param-value>
 </init-param>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>springDispatcherServlet</servlet-name>
 <url-pattern>/</url-pattern>
 </servlet-mapping>
 
 
</web-app>

第四步:

新建一个Controller类,并实现文件上传的功能

import java.io.File;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
 
import javax.json.Json;
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
 
import com.alibaba.fastjson.JSON;
import com.fasterxml.jackson.databind.util.JSONPObject;
 
@Controller
public class FileUploadController {
 
 @RequestMapping(value = "index", method = RequestMethod.GET)
 public String index() {
 return "index";
 }
 
 @RequestMapping(value = "/upload", method = RequestMethod.POST)
 @ResponseBody
 public String upload(@RequestParam("file") MultipartFile file,
  HttpServletRequest request) {
 Map<String, String> modelMap = new HashMap<>();
 if (!file.isEmpty()) {
  String storePath = "E://images";
  Random r = new Random();
  String fileName = file.getOriginalFilename();
  String[] split = fileName.split(".jpg");
  fileName = split[0] + r.nextInt(1000);
  fileName = fileName + ".jpg";
  File filePath = new File(storePath, fileName);
  if (!filePath.getParentFile().exists()) {
  filePath.getParentFile().mkdirs();// 如果目录不存在,则创建目录
  }
  try {
  file.transferTo(new File(storePath + File.separator + fileName));// 把文件写入目标文件地址
  } catch (Exception e) {
  e.printStackTrace();
  modelMap.put("back", "error");
  String json = JSON.toJSONString(modelMap);
  return json;
  }
  modelMap.put("back", "success");
 
 } else {
  modelMap.put("back", "error");
 }
 String json = JSON.toJSONString(modelMap);
 return json;
 
 }
 
}

第五步: 

在WEB-INF下,新建一个pages文件夹,并创建实现文件上传的jsp或者HTML文件(我使用的是jsp):

在index.jsp下写入相关的ajax的方法,在使用ajax之前必须先导入js库。

<body>
 <form id="uploadForm" enctype="multipart/form-data" method="post">
 <input type="file" name="file">
 </form>
 <br>
 <input type="button" id="upload" value="上传">
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
 $('#upload').click(function() {
  var formData = new FormData($('#uploadForm')[0]);
  $.ajax({
  type : 'POST',
  url : 'upload',
  data : formData,
  cache : false,
  processData : false,
  contentType : false,
 
  }).success(function(data) {
  var result = JSON.parse(data);
  alert(result.back);
  }).error(function() {
  alert("上传失败");
 
  });
 });
 });
</script>

第六步:

进行测试

上传文件

上传成功

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍WebUploader+SpringMVC实现文件上传功能,包括了WebUploader+SpringMVC实现文件上传功能的使用技巧和注意事项,需要的朋友参考一下 WebUploader是由Baidu团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥html5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6

  • 本文向大家介绍springMVC+ajax实现文件上传且带进度条实例,包括了springMVC+ajax实现文件上传且带进度条实例的使用技巧和注意事项,需要的朋友参考一下 前端代码: 后端: 如果前端有很多实体类数据同文件一同提交 可以修改后端方法为: 利用下面的代码更可实现带有进度条的文件上传 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍php+ajax实现图片文件上传功能实例,包括了php+ajax实现图片文件上传功能实例的使用技巧和注意事项,需要的朋友参考一下 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效果,以及flash+php功能,下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一,利用jquery ajaxfileupload.js实现文件上传 其

  • 本文向大家介绍jquery ajax实现文件上传功能实例代码,包括了jquery ajax实现文件上传功能实例代码的使用技巧和注意事项,需要的朋友参考一下 下面看下ajax实现文件上传     没有使用插件 一、单文件上传 二、多文件上传 这个是多选上传,关键是multiple="multiple"这个属性,另外使用的接口也是多文件上传的接口。 当然也可以使用单文件上传的模式,多次选择就可以了,只

  • 本文向大家介绍JavaScript html5利用FileReader实现上传功能,包括了JavaScript html5利用FileReader实现上传功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分 2. JS部分 3.图片测试 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望

  • 本文向大家介绍Ajax配合Spring实现文件上传功能代码,包括了Ajax配合Spring实现文件上传功能代码的使用技巧和注意事项,需要的朋友参考一下 由于项目需要,开发一个可以上传图片到服务器的web表单页面。 一、 需求 Web表单页面,可以通过表单上传图片以及其他文字信息。 二、 图片上传的流程 之前没有做过这类页面,通过查询资料。发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下