项目需要实现主图上传,之前在公司看人使用过bootstarp fileinput 这个基于bootstarp的文件上传插件,对于一个后端开发的我,前端一直以来都是使用bootstarp,所以要实现文件上传,选择此插件最好不过,接下就是记录我的实现过程,使用的后端技术是SSM,前端页面框架bootstarp,数据绑定框架avalon.js,不知道我这技术选型算不算简单的前后端分离了?有问题或不合理的地方麻烦大佬指出,谢谢
1、首先引入bootstarp fileinput的相关js文件css文件
2、定义文件上传框id属性为uploadfile
3、初始化文件上传
$(document).ready(function() {
getById(id);//这是我自己的获取数据方法,不要直接复制
$("#uploadfile").fileinput({
language: 'zh', //设置语言
uploadUrl: "/website/ueUploadController/picUpload", //上传的地址,改成自己的
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
initialPreviewAsData:true,
initialPreview: vm.cmsVideoProduct.tcpPic,//vm.cmsVideoProduct.tcpPic这是avalon定义好,在getById里面已经赋值,取回显路径,不要直接复制
/* initialCaption: row.fileName, */
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
maxFileCount: 1, //表示允许同时上传的最大文件个数
maxFileSize:10 *1024 *1024,
messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式' },
enctype: 'multipart/form-data',
validateInitialCount:true
});
//导入文件上传完成之后的事件
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
var response = data.response;
alert(response.filePath);
$("#fileMd5").val(response.fileMd5);
$("#version").val(response.newVersionName);
$("#url").val(response.filePath);
vm.cmsVideoProduct.tcpPic = response.filePath;
});
$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
});
})
4、java文件上传部分(注:为了方便读代码,路径都写在了代码里面,请自行将路径配置到自己的配置文件下)
...
private String baseUrl ="H:/project";// 拿到配置文件配置的路径
@RequestMapping(value = "/picUpload")
public Map upload(HttpServletRequest request, HttpServletResponse response) throws IOException {
String saveUrl = "/upload/2019website";//文件保存路径前缀 必须包含upload
saveUrl += "/mainPic/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
/** 页面控件的文件流* */
MultipartFile multipartFile = null;
Map map =multipartRequest.getFileMap();
for (Iterator i = map.keySet().iterator(); i.hasNext();) {
Object obj = i.next();
multipartFile=(MultipartFile) map.get(obj);
}
JSONObject json = new JSONObject();
try {
String fileName = multipartFile.getOriginalFilename();
String oldName = fileName;
String fileType = fileName.substring(fileName.indexOf(".") + 1);
// 生成随机字符串名,防止出现中文乱码的情况
fileName = getRandomString(15) + "." + fileType;
File dest = new File(baseUrl + saveUrl + "/" + fileName);
if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
dest.getParentFile().mkdirs();
}
multipartFile.transferTo(dest); // 保存文件
//按照相应的json数据格式返回结果
json.put("newVersionName", fileName);
json.put("fileMd5", Files.hash(dest, Hashing.md5()).toString());
json.put("message", "应用上传成功");
json.put("status", true);
json.put("filePath", saveUrl + fileName);
} catch (Exception e) {
json.put("status", false);
e.printStackTrace();
}
response.getWriter().print(json.toString());
return null;
}