Uploadify上传图片案例

探索丶挑战丶突破

于 2018-08-01 15:53:10 发布

阅读量662

点赞数

分类专栏： ▶ Uploadfiy 文章标签： uploadify

本文链接：https://blog.csdn.net/qq_36698956/article/details/81234810

版权

▶ Uploadfiy 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上传图片或附件都使用该接口

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&amp;file=${pageContext.request.contextPath}'+json.filePath+'\' />'+
						'</object>'); */
        	}
        } 
    });
 });

注意：

1. 此jqueryJS 必须在最上边，否者报错没有效果
2. 在页面没有upliadify按钮效果，并且Console控制台不报错，可能是浏览器兼容问题，可以换360极速浏览器试试

博主原创，转载请注明出处: https://blog.csdn.net/qq_36698956