文档章节

webUploader图片上传

m
 majun7848
发布于 2017/04/25 17:46
字数 1499
阅读 25
收藏 0
 <td>资料图片<span style="color: red;">(图片存储的位置以上传的为基础,后台查看放大图片为了显示可能会进行位置改变)</span></td>
				    <td colspan="7">
				    	<div style="width:900px;">
				    		<!-- 放图片的容器 -->
				    		<div style="width:900px;">
				    			<ul id="dragList" class="sortable grid">
				    				<c:if test="${not empty pictureList}">
					    				<c:forEach var="item" items="${pictureList}" varStatus="status">
							  				<li>
												<div>
													<div class="dragDivImage">
														<img width="100px" height="75px" src="${ctxUserFiles}/${item.minImage}" title="${item.fileName}">
													</div>
													<div class="dragDivFd">
														<a rel="group" href="${ctxUserFiles}/${item.Image}" title="${item.fileName}">
															<img src="${ctxStatic}/dragsort/images/fd.jpg" width="45px" height="20px">
														</a>
													</div>
													<div class="dragDivSc">
														<a href="javascript:" onclick="delImg(this)">
															<img src="${ctxStatic}/dragsort/images/sc.jpg" width="45px" height="20px">
														</a>
													</div>
												</div>
													<input type="hidden" name="imagePath" value="${item.Image}">
													<input type="hidden" name="minImagePath" value="${item.minImage}">
													<input type="hidden" name="fileName" value="${item.fileName}">
											</li>
							  			</c:forEach>
				    				</c:if>
				    			</ul>
				    		</div>
				    		<!-- 放上传按钮的容器 -->
				    		<div style="float: left;width: 900px;" id="filePicker">选择图片</div>
				    	</div>
				    </td>
<link type="text/css" rel="stylesheet" href="${ctxStatic}/webuploader/css/webuploader.css"/>
		
		<!-- 图片集 -->
		<link type="text/css" rel="stylesheet" href="${ctxStatic}/fancybox/css/fancybox.css"/>
<style type="text/css">
			.sortable {
				margin: auto;
				padding: 0;
				width: 800px;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			.sortable.grid {
				overflow: hidden;
			}
			.sortable li {
				list-style: none;
				border: 1px solid #CCC;
				background: #F6F6F6;
				font-family: "Tahoma";
				color: #1C94C4;
				margin: 5px;
				padding: 5px;
/* 				height: 22px; */
			}
			.handles span {
			cursor: move;
			}
			.sortable li.disabled {
				opacity: 0.5;
			}
			.sortable.grid li {
/* 				line-height: 80px; */
				float: left;
				width: 108px;
				height: 108px;
				text-align: center;
			}
			.sortable li.highlight {
				background: #FEE25F;
			}
			.sortable li.sortable-placeholder {
				border: 1px dashed #CCC;
				background: none;
			}
			.sortable li>div { width:101px; height:96px; border:solid 1px black; background-color:rgb(45,175,235); text-align:center;  }
			.dragDivImage {width: 100px;height: 75px;overflow: hidden;z-index:-1;}
			.dragDivFd {float: left;width: 45px;height: 20px;overflow: hidden;z-index:0;}
			.dragDivSc {float: right;width: 45px;height: 20px;overflow: hidden;z-index:0;}
		</style>
 <td>资料图片<span style="color: red;">(图片存储的位置以上传的为基础,后台查看放大图片为了显示可能会进行位置改变)</span></td>
				    <td colspan="7">
				    	<div style="width:900px;">
				    		<!-- 放图片的容器 -->
				    		<div style="width:900px;">
				    			<ul id="dragList" class="sortable grid">
				    				<c:if test="${not empty pictureList}">
					    				<c:forEach var="item" items="${pictureList}" varStatus="status">
							  				<li>
												<div>
													<div class="dragDivImage">
														<img width="100px" height="75px" src="${ctxUserFiles}/${item.minImage}" title="${item.fileName}">
													</div>
													<div class="dragDivFd">
														<a rel="group" href="${ctxUserFiles}/${item.Image}" title="${item.fileName}">
															<img src="${ctxStatic}/dragsort/images/fd.jpg" width="45px" height="20px">
														</a>
													</div>
													<div class="dragDivSc">
														<a href="javascript:" onclick="delImg(this)">
															<img src="${ctxStatic}/dragsort/images/sc.jpg" width="45px" height="20px">
														</a>
													</div>
												</div>
													<input type="hidden" name="imagePath" value="${item.Image}">
													<input type="hidden" name="minImagePath" value="${item.minImage}">
													<input type="hidden" name="fileName" value="${item.fileName}">
											</li>
							  			</c:forEach>
				    				</c:if>
				    			</ul>
				    		</div>
				    		<!-- 放上传按钮的容器 -->
				    		<div style="float: left;width: 900px;" id="filePicker">选择图片</div>
				    	</div>
				    </td>
// 图片集
		$("a[rel=group]").fancybox({
			'titlePosition' : 'over',
			'cyclic'        : true,
			'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
						return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
					}
		});
			
	});
		
		function delImg(obj){
			var result = confirm('确定删除此图片吗?');  
			if(result){  
				$(obj).parent().parent().parent().remove();
		        alert('删除成功!');  
		    }
		    return true;
		}


<script type="text/javascript">
		$(document).ready(function(){
			//var $ = jQuery;
		   var $list = $('#dragList'),
		     // 优化retina, 在retina下这个值是2
		     ratio = window.devicePixelRatio || 1,
		
		     // Web Uploader实例
		     uploader;
			
			
// 			$("#dragList").dragsort({
// 			    dragSelector: "li",
// 			    dragEnd: function() { },
// 			    dragBetween: false,
// 			    placeHolderTemplate: "<li></li>"
// 			});

			// 图片拖拽JS
			$('.sortable').sortable();
			
			 // 初始化Web Uploader
			 uploader = WebUploader.create({
			
			     // 自动上传。
			     auto: true,
			
			     // swf文件路径
			     swf: '${ctxStatic}/webuploader/Uploader.swf',
			
			     // 文件接收服务端。
			     server: '${ctx}/uploadify/upload',
			
			     // 选择文件的按钮。可选。
			     // 内部根据当前运行是创建,可能是input元素,也可能是flash.
			     pick: '#filePicker',
			     
			     // 是否容许重复上传
			     duplicate:true,
			     
			     // 允许最大上传进程数
			     threads:1,
			     
			     // 上传图片不进行压缩,原样上传
			     compress:false,
				
				// 上传单个图片的大小限制500KB
				fileSingleSizeLimit:500*1024,
			
			     // 只允许选择文件,可选。
			     accept: {
			         title: 'Images',
			         extensions: 'gif,jpg,jpeg,bmp,png',
			         mimeTypes: 'image/*'
			     }
			 });
			 
			 // 进行错误判断提示
			 uploader.on('error',function(type){
			 	 if (type=="Q_TYPE_DENIED"){
			 	 	alert("上传的图片文件格式为:gif,jpg,jpeg,bmp,png");
			 	 }else if(type=="F_EXCEED_SIZE"){
			 	 	alert("图片的大小请不要超过500KB");
			 	 }
			 });
			
			 // 当有文件添加进来的时候
			 uploader.on( 'fileQueued', function( file ) {
			 
			     // 创建li元素块
			     var li = '';
				    li+='<li id="' + file.id + '">';
	   				li+='<div>';
	   				li+='<div class="dragDivImage"><img width="100px" height="75px"></div>';
					li+='<div class="dragDivFd"><a rel="group"><img src="${ctxStatic}/dragsort/images/fd.jpg" width="45px" height="20px"></a></div>';
					li+='<div class="dragDivSc"><a href="javascript:" onclick="delImg(this)"><img src="${ctxStatic}/dragsort/images/sc.jpg" width="45px" height="20px"></a></div>';
					li+='</div>';
					li+='</li>';
					
				  var $li = $(li);
// 			      $img = $($li.find('img').get(0));
			         
			     $list.append($li);
			
			     // 创建缩略图
// 			     uploader.makeThumb( file, function( error, src ) {
// 			         if ( error ) {
// 			             $img.replaceWith('<span>不能预览</span>');
// 			             alert("上传失败!");
// 			             $li.remove();
// 			             return;
// 			         }
			         
// 			         if(src.length==0){
// 			          alert("上传失败!");
// 			             $li.remove();
// 			             return;
// 			         }
			         
// 			       $img.attr( 'src', src ).attr('title', file.name);
// 			     }, thumbnailWidth, thumbnailHeight );
			 });
			
			 // 文件上传过程中创建进度条实时显示。
			 uploader.on( 'uploadProgress', function( file, percentage ) {
			     var $li = $( '#'+file.id ),
			         $percent = $li.find('.progress span');
			
			     // 避免重复创建
			     if ( !$percent.length ) {
			         $percent = $('<p class="progress"><span></span></p>')
			                 .appendTo( $li )
			                 .find('span');
			     }
			
			     $percent.css( 'width', percentage * 100 + '%' );
			 });
			
			 // 文件上传成功,给item添加成功class, 用样式标记上传成功。
			 uploader.on( 'uploadSuccess', function( file,json) {
			 	//var result = $.parseJSON(data);
				//alert(json.path);
				//alert(file.id);

			 	//上传成功,追加的元素体
			 	$li = $('#'+file.id);
			 	
			 	// 缩略图容器
			 	$img = $($li.find('img').get(0));
			 	
			 	// 图片集容器
			 	$a = $($li.find('a').get(0));
			 	
			 	// 进行缩略图数据填充
			 	$img.attr('src','${ctxUserFiles}/'+json.minPath).attr('title', file.name);
			 	
			 	$a.attr('href','${ctxUserFiles}/'+json.path).attr('title', file.name);
			 	
				var html = '';
				// 上传原始文件隐藏域
			    html += '<input type="hidden" name="imagePath" value="'+json.path+'"/>';
			    // 上传小图片隐藏域
			    html += '<input type="hidden" name="minImagePath" value="'+json.minPath+'"/>';
			    // 上传文件名
			     html += '<input type="hidden" name="fileName" value="'+file.name+'"/>';
			    
			    $li.append(html);
			    
			    // 图片集
				$("a[rel=group]").fancybox({
					'titlePosition' : 'over',
					'cyclic'        : true,
					'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
								return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
							}
				});
				
				// 图片拖拽JS
				$('.sortable').sortable();
			    
			 });
			
			 // 文件上传失败,现实上传出错。
			 uploader.on( 'uploadError', function( file ) {
			     var $li = $( '#'+file.id );
			     $li.remove();
			     alert(file.name+"上传失败!");
			 });
			
			 // 完成上传完了,成功或者失败,先删除进度条。
			 uploader.on( 'uploadComplete', function( file ) {
			     $( '#'+file.id ).find('.progress').remove();
			 });
		});
	</script>





@ResponseBody
	@RequestMapping(value="/upload")
	public Map<String,String> upload(HttpServletRequest request, HttpServletResponse response) throws Exception{
		String newFileName="";
		String extName = "";
		String responseStr="";
		HashMap<String, String> resultMap = new HashMap<String, String>();
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();    
		//String savePath = this.getServletConfig().getServletContext().getRealPath("");
		        //savePath = savePath + "/uploads/";
		// 文件保存路径  ctxPath本地路径
		String ctxPath=request.getSession().getServletContext().getRealPath("/")+"userfiles";
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");  
		String ymd = sdf.format(new Date());  
		ctxPath += File.separator + ymd + File.separator;  
		System.out.println("ctxpath="+ctxPath);
		// 创建文件夹  
		File file = new File(ctxPath);    
		if (!file.exists()) {    
		file.mkdirs();    
		}
		String fileName = null;    
		for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {    
		// 上传文件   
		MultipartFile mf = entity.getValue();  
		fileName = mf.getOriginalFilename();//获取原文件名  
		System.out.println("filename="+fileName);
		// 扩展名格式:
		if (fileName.lastIndexOf(".") >= 0) {
			extName = fileName.substring(fileName.lastIndexOf("."));
		}
		newFileName = UUID.randomUUID().toString();
		File uploadFile = new File(ctxPath + newFileName + extName);
		try {  
		  FileCopyUtils.copy(mf.getBytes(), uploadFile);  
		  
		   responseStr="上传成功";
		   // 图片上传成功,生成缩略图
		   Thumbnails.of(uploadFile).size(226, 226).toFile(new File(ctxPath + newFileName+"_Min"+ extName));
		   
		   resultMap.put("minPath", ymd +"/"+newFileName+"_Min"+extName);
		   
		   } catch (IOException e) {  
		   	responseStr="上传失败";  
		       e.printStackTrace();  
		       }
		}   
		 resultMap.put("path", ymd +"/"+newFileName+extName);
		return resultMap;
	}
	

<script type="text/javascript" src="${ctxStatic}/webuploader/js/webuploader.js"></script>
        
        <!-- 图片集 -->
        <script type="text/javascript" src="${ctxStatic}/fancybox/js/jquery.fancybox-1.3.1.pack.js"></script>
        
        <!-- 图片拖拽插件 -->
<!--         <script type="text/javascript" src="${ctxStatic}/dragsort/js/jquery.dragsort-0.5.2.min.js"></script> -->
        <script type="text/javascript" src="${ctxStatic}/sortable/jquery.sortable.min.js"></script>

© 著作权归作者所有

共有 人打赏支持
m
粉丝 1
博文 10
码字总数 3901
作品 0
崇明
私信 提问
Python实现大文件分片上传(WebUploader)

引言 想借着这篇文章简要谈谈WebUploader大文件上传与Python结合的实现。 WebUploader是百度团队对大文件上传的前端实现,而后端需要根据不同的语言自己实现。这里我采用Python语言的Flask框...

hNicholas
09/18
0
0
使用Web Uploader实现多文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <......

DavidBao
2015/04/15
0
7
webuploader上传文件错误提示

使用webuploader上传图片,对格式大小有限制。 文件大小限制 fileNumLimit: xx,//上传数量限制 fileSizeLimit: xx,//限制上传所有文件大小 fileSingleSizeLimit: xx,//限制上传单个文件大小 ...

潜心笃志
06/29
0
0
webuploader上传遇到的问题

文件上传空间webuploader +jquery,开源而且好用。但是在使用过程中出现一些问题。 问题 1.上传多张图片,图片的顺序会乱掉.解决方法 threads:1 2.文件没有按照原来比例上传,1M多的文件会被...

素剑步青尘
2017/11/08
0
0
WebUploader插件 怎么取消避免重复上传

这两天在寻找新的上传组件,发现WebUploader不错。他不处理UI,方便定制。不过,发现一个很坑爹的问题,就是上传一次后,第二次上传同样的东西,他会在error事件里抛出F_DUPLICATE,无法重复...

Neoman
2015/07/06
0
1

没有更多内容

加载失败,请刷新页面

加载更多

系统维护和tcp连接

查看系统负载 1 w 命令 w命令用于显示系统当前负载 和系统已登录的用户. 查看系统CPU 和核数: cat /proc/cpuinfo| grep 'cpu cores' 第一行显示 :04:41:16 up 8:56, 1 user, load average: 0...

Fc丶
33分钟前
0
0
Mac Pro 下安装 Snappy 压缩工具

snappy 我这里就不做介绍了,直接可以移步 https://github.com/google/snappy/tree/master 查看源码及说明信息。 我这里下载 :https://github.com/google/snappy/releases/download/1.1.4/...

Ryan-瑞恩
36分钟前
1
0
iframe里弹出的层显示在整个网页上

通过在iframe页面添加js脚本,动态给父窗体创建一个div,然后设置让其显示在最顶层这样就可以了 在文件夹中创建两个文件,一个iframe页面,一个父页面index。

少年已不再年少
51分钟前
2
0
聊聊storm trident spout的_maxTransactionActive

序 本文主要研究一下storm trident spout的_maxTransactionActive MasterBatchCoordinator storm-core-1.2.2-sources.jar!/org/apache/storm/trident/topology/MasterBatchCoordinator.java ......

go4it
今天
1
0
js时间函数getTime() 在苹果手机上返回NaN的问题

一、出现问题 var newStartDate = new Date('2017-08-30');var newStartTime = newStartDate.getTime(); 获取到的时间戳,在Android手机正常,在IPhone中返回NaN。 问题说明: 在苹果手机...

tianma3798
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部