引入css和js:

<link href="${pageContext.request.contextPath}/plugin/dialog/dialog.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/plugin/dialog/dialog.js"></script>

代码:

  <!--------------- 多图片+上下切换预览功能开始 -----Autohr:li_hao------------------>
<div class="fitem item2" style="height:auto">
<label style="vertical-align:top">应用截图 </label>
<span>
<jsp:include page="/plugin/dialog/uploadManyImgs.jsp">
<jsp:param value="126" name="width"/>
<jsp:param value="26" name="height"/>
<jsp:param value="" name="assetId"/>
<jsp:param value="setfileid" name="hiddenId"/>
</jsp:include>
</span>
</div>
<div style="display: block;width: 100%;">
<table id="assetTable">
<thead>
<tr>
<th data-options="field:'id',width:80,align:'center',sortable:true,formatter:imgformater">应用截图</th>
<th data-options="field:'name',width:80,align:'center'">名称</th>
<th data-options="field:'fileSize',width:80,align:'center'">文件大小(MB)</th>
<!-- <th data-options="field:'createTimeString',width:180,align:'center'">上传日期</th> -->
<!-- <th data-options="field:'createUserName',width:80,align:'center'">上传人</th> -->
<th data-options="field:'createTimeString',width:80,align:'center',formatter:operformatter">删除</th>
</tr>
</thead>
</table>
<input type="hidden" id="appimgs" name="microAppEntity.appimgs" value="${microAppEntity.appimgs }">
</div>
<div class="mask"></div>
<div class="dialog">
<div>
<div style="width:130px;height:25px;margin:0 auto; ">
<img style='width:30px;height:30px;cursor:pointer;' onclick='toLeft()' src='${pageContext.request.contextPath}/plugin/dialog/images/left.png'>
<img style='width:30px;height:30px;margin-left:60px;cursor:pointer;' onclick='toRight()' src='${pageContext.request.contextPath}/plugin/dialog/images/right.png'>
</div>
</div>
<a href="javascript:void(0)" class="close" title="关闭" style="color:black;margin-bottom:20px;">关闭</a>
<div class="dialog-content">
</div>
</div>
<input type="hidden" id="imgid_before" name="imgid_before">
<input type="hidden" id="imgid_after" name="imgid_after">
<input type="hidden" id="imgindex" name="imgindex">
<!--------------- 多图片+上下切换预览功能结束 -----Autohr:li_hao------------------>

js代码:

$(document).ready(function() {

    //-------------------------- 多图片+预览功能(table数据加载)开始 -----Autohr:li_hao-----------------------------
getDataPagination("assetTable","",null,false);
//修改页面加载图片列表
if($("#method").val() == 'modify'){
var array = $("#appimgs").val().split(",");
if(array!="" && array!=null){
for(var i=0;i<array.length;i++){
var number = 0;
$.post("${pageContext.request.contextPath }/assetmgr/asset_queryOne.do",{assetId:array[i]},
function(data,status){
var data = eval('(' + data + ')');
var obj = new Object();
obj.row = data;
var size = Number(data.fileSize)/1024/1024;
data.fileSize = size.toFixed(2);
$('#assetTable').datagrid('insertRow',{index: number, row:data});
number++;
});
}
}
}
//-------------------------- 多图片+预览功能(table数据加载)结束 -----Autohr:li_hao----------------------------- }); //---------- 多图片+预览功能开始(弹出层:plugin/dialog) -----Autohr:li_hao-----------------------------
function imgformater(value,row,index) {
return "<img width=35 height=35 style='margin-top:4px;cursor:pointer;' onclick='showMask("+row.id+","+index+")' src='${pageContext.request.contextPath}/upload/upload_send.do?id="+row.id+"'>";
}
//弹出层
function showMask(id,index){
imgidHandle(index);
Dialog.open(450,450,'${pageContext.request.contextPath}/upload/upload_send.do?id='+id);
}
//上一张、下一张
function toLeftOrRight(id,index){
imgidHandle(index);
$(".imgclass").attr('src','${pageContext.request.contextPath}/upload/upload_send.do?id='+id);
}
//上一张、下一张id处理逻辑
function imgidHandle(index){
var rows = $('#assetTable').datagrid('getData').rows;
var imgid_before;
var imgid_after
if(index==0){ //第一张图片
if(rows.length==1){ //只有一张图片
imgid_before="";
imgid_after="";
}else{
imgid_before="";
imgid_after=rows[index+1].id;
}
}else if(index==rows.length-1){ //最后一张图片
imgid_before=rows[index-1].id;
imgid_after="";
}else{ //中间
imgid_before=rows[index-1].id;
imgid_after=rows[index+1].id;
}
$("#imgid_before").val(imgid_before);
$("#imgid_after").val(imgid_after);
$("#imgindex").val(index);
} //上一张
function toLeft(){
var imgid_before = $("#imgid_before").val(); //上一张图片id
var index_before = Number($("#imgindex").val())-Number(1); //上一行index
if(imgid_before==""){
alert("已经是第一张图片了!")
}else{
toLeftOrRight(imgid_before,index_before);
}
}
//下一张
function toRight(){
var imgid_after = $("#imgid_after").val(); //下一张图片id
var index_after = Number($("#imgindex").val())+Number(1); //下一行index
if(imgid_after==""){
alert("已经最后一张图片了!")
}else{
toLeftOrRight(imgid_after,index_after);
}
} function operformatter(value,row,index) {
return "<a href=\"javascript:delAttach('"+ row.id +"')\">" + "删除" +"</a>";
}
function delAttach(id){
var rows = $('#assetTable').datagrid('getData').rows;
for ( var i = 0; i < rows.length; i++) {
if(id == rows[i].id){
$('#assetTable').datagrid('deleteRow',i);
}
}
}
//---------- 多图片+预览功能结束(弹出层:plugin/dialog) -----Autohr:li_hao-----------------------------

easyui多图片上传+预览切换+支持IE8的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  3. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  4. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  5. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  6. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  7. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  9. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

随机推荐

  1. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  2. 使用Blend设计出符合效果的WPF界面

    之前不会用blend,感觉好难的,但美工给出的效果自己有没办法实现,所以研究了一下blend,感觉没有想象中的那么难 废话不多说,开始界面设计 今天拿到美工给的一个界面效果图 这个界面说实话,还可以吧 ...

  3. day02-python与变量

    1.堆区开辟空间存放 变量值  2.将存放 变量值 空间的地址提供给栈区  3.栈区为变量名开辟空间存放提供来的地址 变量直接相互赋值 定义变量的优化机制 定义变量与重新赋值

  4. redis 的备份策略,最好使用:RDB-AOF 混合持久化

    相关资料: Redis 4.0 新功能简介:RDB-AOF 混合持久化:http://blog.huangz.me/2017/redis-rdb-aof-mixed-persistence.html ...

  5. Spring Cloud(Dalston.SR5)--Zuul 网关-过滤器

    Spring Cloud 为 HTTP 请求的各个阶段提供了多个过滤器,这些过滤器的执行顺序由各自提供的一个 int 值决定,提供的值越小则优先级越高,默认的过滤器及优先级如下: 自定义过滤器 在默认 ...

  6. FPGA 关于中间环节生成时钟的约束---Generated clocks

    FPGA 关于中间环节生成时钟的约束---Generated clocks FPGA 的生成时钟,有一个主时钟源,在定义的之后,需要指明主时钟源. 生成时钟主要定义的是:分频,倍频,相移等 二分频时钟 ...

  7. Centos6.5部署Sonar6.7.1备注

    1.一定要用非root账号登录(自己建立账号),建立Sonar目录并部署,因为使用了Elasticsearch 5.6.3做搜索服务器,而它不允许用root账号启动服务,会报如下错误: Excepti ...

  8. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  9. 常量&字符编码

    day1 name='Nod Chen' name2=name print('My name is ',name,name2) name='Luna zhou' print(name,name2) _ ...

  10. 一台电脑上配置多个tomcat同时运行

    好使 1 1.配置运行tomcat 首先要配置java的jdk环境,这个就不在写了  不懂去网上查查,这里主要介绍再jdk环境没配置好的情况下 如何配置运行多个tomcat 2.第一个tomcat: ...