1.本案例使用Maven项目
<!-- servlet 组件 -->
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
<scope>runtime</scope>
</dependency>
<!-- springmvc 组件 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.4.RELEASE</version>
</dependency>
<!-- commons fileupload 组件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<!-- commons io 组件 -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.5</version>
</dependency>
<!-- jackson 组件 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.5</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.5</version>
</dependency>
<!-- junit 组件 -->
<dependency>
<groupId>org.junit</groupId>
<artifactId>com.springsource.org.junit</artifactId>
<version>4.7.0</version>
</dependency>
</dependencies>
<!-- 插件 -->
<build>
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.1</version>
<configuration>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<target>1.8</target>
<source>1.8</source>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
//Tomcat插件(非必须)
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<path>/</path>
<port>82</port>
</configuration>
</plugin>
</plugins>
</build>
2.客户端JSP
页面导入相关Simditor插件
<textarea id="tex"></textarea>
<script type="text/javascript">
var toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',
'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
'link', 'image', 'hr', '|', 'indent', 'outdent' ];
var editor = new Simditor({
textarea: $('#tex'),
placeholder : "这里输入内容",
pasteImage : true,
toolbarFloat : true,
toolbar : toolbar,
upload : {
url : "/upload", //文件上传的接口地址
//params: {}, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
fileKey: 'photo', //服务器端获取文件数据的参数名
connectionCount: 1,
leaveConfirm: '正在上传文件'
}
});
</script>
3.服务端Java
省略SpringMVC配置
@Controller
public class FileUploads {
@RequestMapping(value="test",method=RequestMethod.GET)
public String test() {
return "test";
}
@RequestMapping(value="upload",method=RequestMethod.POST)
@ResponseBody
public Map<String, String> upload(MultipartFile photo) throws IllegalStateException, IOException {
Map<String, String> map = new HashMap<String, String>();
try {
//存储文件夹
String holder = "fileUpload/";
if (photo == null) {
return null;
}
String orgginalFileName = photo.getOriginalFilename();
//新文件名称
String newFileName = UUID.randomUUID().toString() + orgginalFileName;
//保存路径
String serverPath = getRealPath() + holder;
photo.transferTo(new File(serverPath, newFileName));
//返回客户端的JSON
map.put("success", "true");
map.put("msg", "成功");
//返回服务器地址
map.put("file_path",getServerPath() + holder + newFileName);
} catch (IOException e) {
map.put("success", "false");
}
return map;
}
/**
* 服务器地址
* @return
*/
public String getServerPath() {
HttpServletRequest request = getRequest();
return request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + request.getContextPath() + "/";
}
/**
* 获取项目根目录
* @return
*/
public String getRealPath() {
HttpServletRequest request = getRequest();
return request.getServletContext().getRealPath("/");
}
/**
*
* @return
*/
private HttpServletRequest getRequest() {
return ((ServletRequestAttributes)(RequestContextHolder.currentRequestAttributes())).getRequest();
}
}
项目目录结构
演示:
上传图片选择
确定上传
上传成功