文档章节

webUploader图片上传

m
 majun7848
发布于 2017/04/25 17:46
字数 1499
阅读 17
收藏 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>

© 著作权归作者所有

共有 人打赏支持
m
粉丝 1
博文 10
码字总数 3901
作品 0
崇明
webuploader一次性上传多张图片到后台,后台如何处理

如题,我用webuploader上传图片,后台用springmvc,上传一张时没有问题,但一次性上传多张的时候,后台我就不知道怎么处理了,作为后台我不知道前端传来几张 这是前端页面代码...

studyforjava ⋅ 2016/07/26 ⋅ 2

使用webuploader时报错: Uncaught Error: jQuery or Zepto not found!

使用webuploader时报错:Uncaught Error: jQuery or Zepto not found! 请教大神这要怎么解决?我的代码如下,直接用的官网Getting Started的代码。...

我是程序yuan ⋅ 2017/09/18 ⋅ 0

WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

大家好,我的使用场景如下:(我觉得比较通用) 用户在需要专家帮忙的时候需要填写文字信息以及上传图片 可上传多图,每选择一个图片无需点击“上传”按钮而自动上传 上传成功后,出现缩略图...

错觉 ⋅ 2015/12/09 ⋅ 6

大神们,谷歌浏览器53为什么点击上传图片要等很久

我用webuploader上传图片,以前谷歌浏览器版本没升级之前,一切正常。现在谷歌升级之后,点击上传按钮要等很久才弹出文件选择的弹窗。 其次,我用其他的浏览器,如火狐、IE、遨游等等,均没有...

漠沙 ⋅ 2016/10/26 ⋅ 2

webuploader java版本

网上一些webuploader上传的资料,有php版和java版本的,做了一下整合,现分享以下成果,可以讨论,不喜勿碰。说一下过程。 第一步:下载地址,提供官网地址 http://fex.baidu.com/webupload...

卯金刀GG ⋅ 2016/12/20 ⋅ 0

整理的JAVA相关框架

名称 作用 相关网站介绍 java Quartz 定时器 (定时执行某程序,精确到秒,可设置周期) minidai 标记: java工具框架 java websocket 即时通讯技术 Lucene 全文检索 webuploader 批量异步上传...

minidai ⋅ 2015/11/30 ⋅ 0

PHP 用webuploader上传到ftp上,图片被压缩了,导致图片显示不出,下面粘贴了部分代码。求指点。

我用webuploader上传图片到ftp上,webuploader的图片上传方法是自己写的。普通的ftp上传。但传上去后,图片因存在错误而无法显示。原本3,40KB的图片只剩下了1KB左右。搞不明白这是为什么。 ...

阴霾遇上阳光 ⋅ 2016/07/20 ⋅ 1

JQ_Web Uploader图片上传控件

HTML <div id="uploader"> <div id="jstat"> <input type="text" name="thumb" id="jtb" value="" /> </div> <div id="jfile">选择文件</div> <button id="jbtn" class="btn btn-default">开......

喵王不瞌睡 ⋅ 2014/07/28 ⋅ 1

webuploader使用 修改图片怎么破

webuploader上传的图片修改应该怎么做(删除图片重新选择上传)

陌生、路人甲 ⋅ 2015/12/10 ⋅ 5

使用Web Uploader实现多文件上传

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

DavidBao ⋅ 2015/04/15 ⋅ 7

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部