<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 ? ' ' + 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 ? ' ' + 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>
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
