添加依赖
POM.xml
<!-- 文件上传与下载 -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>${commons-io.version}</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
配置MultipartResolver处理器
spring-mvc.xml
<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传文件大小上限，单位为字节（10MB） -->
<property name="maxUploadSize">
<value>10485760</value>
</property>
<!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1 -->
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
编写Controller
@Controller
@RequestMapping(value="/upload")
public class UploadController{
@RequestMapping(value="image")
@ResponseBody
public UploadResp upload(@RequestParam("file") MultipartFile multipartFile, HttpServletRequest request, ModelMap model) {
UploadResp uploadResp = new UploadResp();
/* 获取上传文件的后缀 */
String suffix = multipartFile.getOriginalFilename().substring (multipartFile.getOriginalFilename().lastIndexOf("."));
/* 保存文件名称 */
String logImageName = UUID.randomUUID().toString()+ suffix;
/* 构建图片保存的目录 */
SimpleDateFormat dateformat = new SimpleDateFormat("yyyy/MM/dd/HH");
String logoPathDir = "/files"+ dateformat.format(System.currentTimeMillis());
/* 返回相对路径给客户端 */
uploadResp.setName(logoPathDir+"/"+logImageName);
/* 得到图片保存目录的真实路径 */
String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);
/**根据真实路径创建目录**/
File logoSaveFile = new File(logoRealPathDir);
if(!logoSaveFile.exists()) logoSaveFile.mkdirs();
//构建文件名称
//String logImageName = multipartFile.getOriginalFilename();
/**拼成完整的文件保存路径加文件**/
String fileName = logoRealPathDir + File.separator + logImageName;
try {
File file = new File(fileName);
multipartFile.transferTo(file);
}
catch (IllegalStateException e)
{
e.printStackTrace(); }
catch (IOException e)
{
e.printStackTrace();
}
return uploadResp;
}
}
public class UploadResp {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}s
编写图片上传页面
利用dropzone，下载地址:
链接：https://pan.baidu.com/s/1thS43mCTVzVD0l9z2BT9MQ
提取码：8pf6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="plugins/dropzone/dropzone.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="plugins/dropzone/dropzone.css">
</head>
<body>
<div class="form-group">
<label class="title">真人照(最多只能传一张)</label>
<div id="dropz" class="dropzone"></div>//这段代码是展示dropzone.js的精髓
</div>
<input type="hidden" name="file_id" id="file_id"/>
<script type="text/javascript">
Dropzone.autoDiscover = false;
$(document).ready(function () {
var appElement = document.querySelector('div .inmodal');
var myDropzone = new Dropzone("#dropz", {
url: "/upload/image",//文件提交地址
method:"post", //也可用put
paramName:"file", //默认为file
maxFiles:1,//一次性上传的文件数量上限
maxFilesize: 2, //文件大小，单位：MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
addRemoveLinks:true,
parallelUploads: 1,//一次上传的文件数量
//previewsContainer:"#preview",//上传图片的预览窗口
dictDefaultMessage:'拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传1个文件！",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
dictFallbackMessage:"浏览器不受支持",
dictFileTooBig:"文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
init:function(){
this.on("addedfile", function(file) {
//上传文件时触发的事件
document.querySelector('div .dz-default').style.display = 'none';
});
this.on("success",function(file,data){
//上传成功触发的事件
console.log('ok');
$("#file_id").val(data.name);
});
this.on("error",function (file,data) {
//上传失败触发的事件
console.log('fail');
var message = '';
//lavarel框架有一个表单验证，
//对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
//对应file.accepted的值是false，在这里捕捉表单验证的错误提示
if (file.accepted){
$.each(data,function (key,val) {
message = message + val[0] + ';';
})
//控制器层面的错误提示，file.accepted = true的时候；
alert(message);
}
});
this.on("removedfile",function(file){
//删除文件时触发的方法
var file_id = angular.element(appElement).scope().file_id;
if (file_id){
$.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
console.log('删除结果:'+data.message);
})
}
angular.element(appElement).scope().file_id = 0;
document.querySelector('div .dz-default').style.display = 'block';
});
}
});
})
</script>
</body>
</html>
网友评论