webUploader图片上传
webUploader图片上传
majun7848 发表于9个月前
webUploader图片上传
  • 发表于 9个月前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 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>

共有 人打赏支持
粉丝 1
博文 10
码字总数 3901
×
majun7848
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: