easyui多图片上传+预览切换+支持IE8

引入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-----------------------------