上传图片 或附件都使用该接口
Impl
@Override
public List<Map<String, Object>> saveFileMap(HttpServletRequest request) {
if(request instanceof MultipartHttpServletRequest){
MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
List<MultipartFile> files = req.getFiles(Consts.UPLOAD_OPERA_UPLOADFILE);
List<Map<String,Object>> fileLIst = new ArrayList<Map<String,Object>>();
if(files != null && files.size() >0){
for(MultipartFile file : files){
if(file.isEmpty()){
continue;
}
String fileName = file.getOriginalFilename();
if(StringUtils.isEmpty(fileName)){
continue;
}
String fileExtension = getFileExtName(fileName);
if(StringUtils.isEmpty(fileExtension)){
continue;
}
Map<String,Object> map = new HashMap<String,Object>();
map.put("fileName", fileName);
// 获取绝对路径
String relativePath = getFileSavePath(fileExtension);
String targetPath = parameterSource.getString(Consts.STORAGE_ROOT_KEY)
+File.separator+parameterSource.getString(Consts.STORAGE_ATTACHMENT_DIR_KEY);
//获取相对路径 扔到 new File(参数)
// 例如 E:\job\eclipseFile01\platform-main-cy-aqjd\WebContent\
//System.out.println(request.getServletContext().getRealPath("/"));
try {
File ff = new File(targetPath+relativePath);
if(!ff.exists()){
ff.mkdirs();
}
file.transferTo(ff);
} catch (Exception e) {
e.printStackTrace();
}
map.put("path", relativePath);
map.put("uploadTime", new Date());
//添加文章（可以看mapper中sql）
insert("insert", map);
//返回页面数据
fileLIst.add(map);
}
}
return fileLIst;
}
return null;
}Jsp页面（引入uploadify 的css和js 还有jQuery ，jQuery一定放在上边） 这个和富文本不冲突，可以统一个页面都引用使用
<head>
<link href="./ue/uploadify/uploadify.css" rel="stylesheet">
<script src="./ue/uploadify/jquery.uploadify.min.js"></script>
</head>
<body>
<tr>
<td>
</td>
<td style="text-align: left;"><div class="video-upload-box"
id="video-upload-box">
<div>
<input type="file" name="uploadify" id="uploadify" />
</div>
<div id="upload-file-box" class="upload-file-box">
<div class="cancel">
<a href="#" id="upload-remove"></a>
</div>
<span id="fileName"></span>
</div>
</div></td>
</tr>
<tr>
<td></td>
<td style="text-align: left;">
<div class="video" id="cms-video" style="display: none">
<video id="video" class="video-js vjs-default-skin"
style="" controls preload="none" width="480"
height="270">
</video>
</div>
</td>
</tr>
</body>Js
$(function() {
$("#uploadify").uploadify({
'swf': './ue/uploadify/uploadify.swf',
'uploader': contextPath+'/common/attachment/upload3.do',
'buttonText': '上传视频',
'fileObjName':'uploadfile',
// 'fileObjName':'Filedata',
'height':25,
'width':100,
'fileTypeDesc': 'Image Files',
'fileTypeExts': '*.avi;*.mkv;*.rmvb;*.3gp;*.mp4;',
'cancelImg':'plguin/uploadify-cancel.png',
'cancelMessage':'已取消！',
'successMessage':'上传完成',
//发送给后台的其他参数通过formData指定
//'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
//上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
//'queueID': 'fileQueue',
//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true,
'onUploadStart':function(file){
$.messager.progress();
},
'onUploadComplete' : function(file) {
/*alert('The file ' + file.name + ' finished processing.');*/
},
'onUploadSuccess' : function(file, data, response) {
$.messager.progress('close');
var json = $.parseJSON(data);
if(json.recode==200){
$('#cms-video-fileId').val(json.fileId);
$('#fileName').html(json.fileName);
$('#upload-file-box').show();
$('#cms-video').show();
$('#video').append('<source src="'+contextPath+json.filePath+'" type="video/mp4" />');
//如果浏览器不兼容HTML5则使用flash播放
/*$('#cms-video').append('<object width="480" height="270" type="application/x-shockwave-flash" data="${pageContext.request.contextPath}/flash/flowplayer-3.2.1.swf">'+
'<param name="movie" value="${pageContext.request.contextPath}/flash/flowplayer-3.2.1.swf" />'+
'<param name="allowfullscreen" value="true" />'+
'<param name="flashvars" value=\'controlbar=over&file=${pageContext.request.contextPath}'+json.filePath+'\' />'+
'</object>'); */
}
}
});
});注意：
1. 此jqueryJS 必须在最上边，否者报错没有效果
2. 在页面没有upliadify按钮效果，并且Console控制台不报错，可能是浏览器兼容问题，可以换360极速浏览器试试
博主原创，转载请注明出处: https://blog.csdn.net/qq_36698956
版权声明：博客对我来说是记忆的笔记和知识的分享~此博文为博主原创转载请注明出处即可~