jquery之批量上传图片

Posted 终极用户

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery之批量上传图片相关的知识,希望对你有一定的参考价值。

 

复制代码
//var btn;
/**
 * 
 * 获取当前时间
 */

==================================js=====================================
function p(s) {
    return s < 10 ? \'0\' + s: s;
}

var myDate = new Date();
//获取当前年
var year=myDate.getFullYear();
//获取当前月
var month=myDate.getMonth()+1;
//获取当前日
var date=myDate.getDate(); 
var h=myDate.getHours();       //获取当前小时数(0-23)
var m=myDate.getMinutes();     //获取当前分钟数(0-59)
var s=myDate.getSeconds();  

var now=year+\'-\'+p(month)+"-"+p(date)+" "+p(h)+\':\'+p(m)+":"+p(s);


$(function() {
    createParentHiddenDom("frameName");
    if (window.opener) {
        parentWindow = window.opener;
    } else {
        parentWindow = window.parent;
    }
    $(\'#addstartTime\').datetimebox({
        showSeconds : false,
        editable : false
    });
    $(\'#addendTime\').datetimebox({
        showSeconds : false,
        editable : false
    });
    
    
//    alert(now);
    $("#opreatehtml").window("close");
    $("#deliveryGrid")
            .datagrid(
                    {
                        url : appPath + "/page/weixinActivityAct/getPage",
                        height : "full",
                        striped : true,
                        remoteSort : false,
                        pagination : true,
                        rownumbers : true,
                        singleSelect : false,
                        queryParams : getQueryParam(),
                        frozenColumns : [ [
                                {
                                    field : "ck",
                                    checkbox : true
                                },
                                {
                                    field : "opt",
                                    title : "操作",
                                    width : 100,
                                    align : "left",
                                    formatter : function(value, rowData,
                                            rowIndex) {
                                        var html = "";
                                        // #12579修正
                                        if (rowData.isStatus != "stopped" && rowData.isStatus != "finished"){
                                            html += "<img class=\'op-enable\' src=\'"
                                                + appPath
                                                + "/js/lib/jquery-easyui/themes/icons/pencil.png\' onClick=\\\'showWin("+ rowData.weixinId+","+"\\""+rowData.isStatus+"\\""+")\' title=\'编辑\'/>&nbsp;&nbsp;";
                                        }else {
                                            html += "<img class=\'op-enable\' style=\'visibility:hidden\' src=\'"
                                                + appPath
                                                + "/js/lib/jquery-easyui/themes/icons/pencil.png\' onClick=\\\'showWin("+ rowData.weixinId+","+"\\""+rowData.isStatus+"\\""+")\' title=\'编辑\'/>&nbsp;&nbsp;";
                                        }
                                        if (rowData.isStatus != "stopped" && rowData.isStatus != "finished" && rowData.isStatus != "activated"){
                                            html += "<img class=\'op-enable\' src=\'"
                                                + appPath
                                                + "/js/lib/jquery-easyui/themes/icons/reset-pass.png\' onClick=\'showDetail("
                                                + rowData.weixinId
                                                + ")\' title=\'微信团管理\'/>&nbsp;&nbsp;";
                                        }else {
                                            html += "<img class=\'op-enable\' style=\'visibility:hidden\' src=\' "
                                                + appPath
                                                + "/js/lib/jquery-easyui/themes/icons/reset-pass.png\' onClick=\'showDetail("
                                                + rowData.weixinId
                                                + ")\' title=\'微信团管理\'/>&nbsp;&nbsp;";
                                        }
                                        html += "<img class=\'op-enable\' src=\'"
                                                + appPath
                                                + "/js/lib/jquery-easyui/themes/icons/cancel.png\' onClick=\'deletes("
                                                + rowData.weixinId
                                                + ")\' title=\'删除\'/>&nbsp;&nbsp;";
                                        return html;
                                    }
                                } ] ],
                        columns : [ [ {
                            field : \'weixinId\',
                            title : \'微信ID\',
                            width :80,
                            align : \'center\',
                            sortable : true
                        }, {
                            field : \'groupPrice\',
                            title : \'团价格\',
                            width : 120,
                            align : \'center\',
                            sortable : true,
                              formatter:
                                  function(value){
                                  if(!isNaN(Number(value))){
                                      return Number(value).toFixed(2)
                                      }
                                  }
                            
                            
                            
                        }, {
                            field : \'weixinName\',
                            title : \'微信团名称\',
                            width : 120,
                            align : \'center\',
                            sortable : true
                        }, {
                            field : \'startTime\',
                            title : \'开始时间\',
                            width : 100,
                            align : \'left\',
                            sortable : true  
                        }, {
                            field : \'endTime\',
                            title : \'结束时间\',
                            width : 100,
                            align : \'left\',
                            sortable : true
                        }, {
                            field : \'chooseN\',
                            title : \'X选一\',
                            width : 80,
                            align : \'center\',
                            sortable : true
                              
                        }, {
                            field : \'beginWaitTime\',
                            title : \'团长开团等待时间\',
                            width : 120,
                            align : \'center\',
                            sortable : true
                        }, {
                            field : \'minimumJoinMemberNum\',
                            title : \'起团人数\',
                            width : 100,
                            align : \'center\',
                            sortable : true
                        },

                        {
                            field : \'isStatus\',
                            title : \'活动状态\',
                            width : 120,
                            align : \'center\',
                            sortable : true,
                            formatter : function(value, rowData, rowIndex) {
                                var strReturn = "";
                                if (rowData.isStatus == \'nonactivated\') {
                                    //strReturn = \'未激活\';
                                      return ("<font color=black> "+strReturn +"未激活</font>"); 
                                } else if (rowData.isStatus == \'activated\') {
                                    //strReturn = \'激活\';
                                     return ("<font color=green> "+strReturn +"激活</font>"); 
                                } else if (rowData.isStatus == \'stopped\') {
                                    //strReturn = \'停用\';
                                     return ("<font color=red> "+strReturn +"强制停止</font>"); 
                                } else if (rowData.isStatus == \'finished\') {
                                    //strReturn = \'已结束\';
                                     return ("<font color=red> "+strReturn +"已结束</font>"); 
                                }
                                   //return strReturn;
                            }
                        }, ] ],
                        toolbar : [ {
                            id : \'btnadd\',
                            text : \'新增微信团\',
                            iconCls : \'icon-add\',
                            handler : function() {
                                showWin(null,null);
                            }
                        } ]
                    });
});

// 查询条件
function getQueryParam() {
    var weixinActivity = new Object();
    weixinActivity.weixinName = $.trim($("#weixinName").val());
    weixinActivity.isStatus = $(\'#isStatus\').combobox("getValue");
    weixinActivity.startTime = $("#startTime").datebox("getValue");
    weixinActivity.endTime = $("#endTime").datebox("getValue");

    weixinActivity.minimumJoinMemberNum = $.trim($("#minimumJoinMemberNum")
            .val());

    return weixinActivity;
}

function doQuery() {

    if (($("#minimumJoinMemberNum").val() < 2 || $("#minimumJoinMemberNum")
            .val() > 99)
            && $("#minimumJoinMemberNum").val() != 0) {
        $.messager.alert(\'提示\', "起团人数在2~~99之间", \'info\');
        return;
    }
    $("#deliveryGrid").datagrid(\'load\', getQueryParam());
}

/**
 * 编辑
 * 
 * @param id
 */
function showWin(id,isStatus) {
    if (id != null && isStatus!=null) {
        // 不同的活动状态不同的编辑字段
        if(isStatus !=null){
            if (isStatus == \'finished\'||isStatus==\'stopped\' ) {
                $.messager.alert(\'提示\', "此活动状态不可编辑", \'info\');
                return;
            }
            if (isStatus ==\'activated\') {
                $("#addstartTime").datetimebox("disable");
                $("#addendTime").datetimebox("disable");
                $("#form_edit").find("input[id=addweixinName]").attr(
                        "disabled", "disabled");
                //隐藏照片的上传按钮
                $("#fsUploadDiv").css("display","none");
                $("#form_edit").find("input[id=addgroupPrice]").attr(
                        "disabled", "disabled");
                $("#form_edit").find("input[id=adddiscountLab]").attr(
                        "disabled", "disabled");
                $("#form_edit").find("input[id=addminimumJoinMemberNum]").attr(
                        "disabled", "disabled");
                $("#form_edit").find("input[id=addbeginWaitTime]").attr(
                        "disabled", "disabled");
                $("#form_edit").find("input[id=addorderBy]").attr("disabled",
                        "disabled");
            }else{
                $("#fsUploadDiv").css("display","block");
                $("#addstartTime").datetimebox("enable");
                $(\'#addendTime\').datetimebox("enable");
                $(\'#addweixinName\').removeAttr("disabled");
                $(\'#addgroupPrice\').removeAttr("disabled");
                $(\'#adddiscountLab\').removeAttr("disabled");
                $(\'#addminimumJoinMemberNum\').removeAttr("disabled");
                $(\'#addbeginWaitTime\').removeAttr("disabled");
                $(\'#addorderBy\').removeAttr("disabled");
            }
        }
    }else{
        $("#fsUploadDiv").css("display","block");
        $("#addstartTime").datetimebox("enable");
        $(\'#addendTime\').datetimebox("enable");
        $(\'#addweixinName\').removeAttr("disabled");
        $(\'#addgroupPrice\').removeAttr("disabled");
        $(\'#adddiscountLab\').removeAttr("disabled");
        $(\'#addminimumJoinMemberNum\').removeAttr("disabled");
        $(\'#addbeginWaitTime\').removeAttr("disabled");
        $(\'#addorderBy\').removeAttr("disabled");
    
    
    }
    /**
     * 三种方法移除disabled属性
     * $(\'#form_edit\').attr("enable",true); 
     * $(\'#form_edit\').attr("disabled",false);
     * $(\'#addweixinName\').removeAttr("disabled");
     * $(\'#form_edit\').attr("disabled","");
     */
    $("#fileList").html("");
    $("#idHidden").val("");
    $("#adddiscountLab").val("");
    $("#addweixinName").val("");
    // 团长开团等待时间  #12327 修复
    $("#addbeginWaitTime").val("24");

    $("#addgroupPrice").val("");
    $("#addminimumJoinMemberNum").val("");
    $("#addstartTime").datebox("setValue","");
    $("#addendTime").datebox("setValue","");
//    $("#addbeginTime").datebox("setValue","");
//    $("#addendTime").datebox("setValue","");
    $("#addorderBy").val("");
    $("#addisStatus").combobox("setValue", \'nonactivated\');
    $("#imgUrlHidden").val("");

    var iconStr = "icon-add";
    var title = "新增微信团";
    var urlList;
    if (id != null) {
        iconStr = "icon-edit";
        title = "编辑微信团";
        $.post(appPath + "/page/weixinActivityAct/getBean/" + id, {}, function(
                data) {
            $("#idHidden").val(data.weixinId);
            $("#adddiscountLab").val(data.discountLab);
            $("#addweixinName").val(data.weixinName);
            $("#addbeginWaitTime").val(data.beginWaitTime);
            $("#addgroupPrice").val(data.groupPrice);
            $("#addminimumJoinMemberNum").val(data.minimumJoinMemberNum);
//             $("#addbeginTime").datebox("setValue",data.beginTime); 
            $("#addendTime").datebox("setValue", data.endTime);
            $("#addstartTime").datebox("setValue", data.startTime);
            $("#addTimeweixin").val(data.addTimeweixin);
            $("#addorderBy").val(data.sortBy);
            $("#addisStatus").combobox(\'setValue\', data.isStatus);
            
//             $("#editWeixinStatus").val(data.editWeixinStatus);
             $("#editWeixinStatus").val(data.isStatus);
            if (data.bannerImgUrl != null && data.bannerImgUrl !=""){
                $("#imgUrlHidden").val(data.bannerImgUrl+";");
                //获取Img标签Url
                urlList = data.bannerImgUrl.split(\';\');
            }
            if(urlList!=null && urlList!=\'\'){
                for (var i=0;i<urlList.length;i++){
                    // 获取当前时间作为随机值,用于img标签ID
                    var randomVal = getTimestamp();
                    //读取每个Url,并创建Img标签
                    $("#fileList")
                    .append("<div id = \'div"+randomVal+"\'  style=\'display: inline\'><img id=\'img"+ randomVal+ "\'  style=\'border: solid 1px #ccc; padding: 3px; width: 70px; height: 50px; cursor: hand;\' /> " +
                            "<a id=\'a"+randomVal+"\' href=\'javascript:void(0)\' onclick=\'deleteImg(this)\'>删除</a>&nbsp;&nbsp;</div>");
                    //设置Src属性
                    $("#img" + randomVal).attr("src", urlList[i]);
                }
                //激活状态下,隐藏删除<a>标签
                if (isStatus ==\'activated\') {
                    $("#form_edit a").hide();
                }else{
                    $("#form_edit a").show();
                }
            }
        }, "json");
        
    }
    $(\'#opreateHtml\').window({
        title : title,
        iconCls : iconStr,
        width : 888,
        height : 500,
        left : 200,
        modal : true,
        shadow : true,
        collapsible : false,
        minimizable : false,
        maximizable : false
    });
    $(\'#opreateHtml\').window(\'move\', {
        top : 20
    });

    $(\'#opreateHtml\').window(\'open\');
}

function closeWin(id) {
    $(\'#opreateHtml\').window(\'close\');
}

function save() {
    var weixinActivity = new Object();
    if ($("#idHidden").val() != null && $("#idHidden").val() != "") {
        weixinActivity.weixinId = $("#idHidden").val();
    }

    
    if ($("#addweixinName").val() == null || $("#addweixinName").val() == "") {
        $.messager.alert(\'提示\', "微信团名称不能为空", \'info\');
        return;
    }
    // 上传图片 最多上传5张

    if ($("#imgUrlHidden").val() == null || $("#imgUrlHidden").val() == "") {
        $.messager.alert(\'提示\', "图片不能为空", \'info\');
        return;
    }

    if ($("#addstartTime").datebox("getValue") == null
            || $("#addstartTime").datebox("getValue") == "") {
        $.messager.alert(\'提示\', "开始时间不能为空", \'info\');
        return;
    }
    if ($("#addendTime").datebox("getValue") == null
            || $("#addendTime").datebox("getValue") == "") {
        $.messager.alert(\'提示\', "结束时间不能为空", \'info\');
        return;
    }

    if ($("#addstartTime").datebox("getValue") >= $("#addendTime").datebox(
            "getValue")) {
        $.messager.alert(\'提示\', "开始时间不能大于结束时间", \'info\');
        return;
    }
    //开始时间不能大于提交时间
    if(weixinActivity.weixinId ==null || weixinActivity.weixinId ==""){
        if($("#addstartTime").datebox("getValue")<= now){
            $.messager.alert(\'提示\', "开始时间不能小于提交时间", \'info\');
            return;
        }    
    }
    
    
    if ($("#addgroupPrice").val() == null || $("#addgroupPrice").val() == "" || $("#addgroupPrice").val()==0) {
        $.messager.alert(\'提示\', "微信团价格不能为空且不能为0", \'info\');
        return;
    }
    if ($("#adddiscountLab").val() == null || $("#adddiscountLab").val() == "") {
        $.messager.alert(\'提示\', "折扣标签不能为空", \'info\');
        return;
    }
    // 起团人数
    if ($("#addminimumJoinMemberNum").val() == null
            || $("#addminimumJoinMemberNum").val() == "") {
        $.messager.alert(\'提示\', "起团人数不能为空", \'info\');
        return;
    }
    if ($("#addminimumJoinMemberNum").val() < 2
            || $("#addminimumJoinMemberNum").val() > 99) {
        $.messager.alert(\'提示\', "起团人数正在2~~99", \'info\');
        return;
    }
    // 团长开团等待时间 必须是24的倍数 且上限是120
    if ($("#addbeginWaitTime").val() == null
            || $("#addbeginWaitTime").val() == "") {
        $.messager.alert(\'提示\', "团长开团等待时间不能为空", \'info\');
        return;
    }
    if ($("#addbeginWaitTime").val() % 24 != 0
            || $("#addbeginWaitTime").val() == 0
            || $("#addbeginWaitTime").val() > 121) {
        $.messager.alert(\'提示\', "团长开团等待时间必须是24的倍数且不能为0且最大不能超过120", \'info\');
        return;
    }

//    if ($("#addorderBy").val() == null || $("#addorderBy").val() == "") {
//        $.messager.alert(\'提示\', "手动排序不能为空", \'info\');
//        return;
//    }
    
    /**
     * 只有活动状态是激活状态,且已经达到开始时间但是未达到结束时间,这时才可以将活动状态修改为强制停止
     */
     if(!(($("#addstartTime").datebox("getValue") <= now && $("#addendTime").datebox("getValue")> now && $(\'#editWeixinStatus\').val()==\'activated\' ))&&$("#addisStatus").combobox("getValue")==\'stopped\')
         {
         $.messager.alert(\'提示\', "只有活动状态是激活状态,且已经达到开始时间但是未达到结束时间,这时才可以将活动状态修改为强制停止", \'info\');
         return;
     }
    
//     if( $(\'#editWeixinStatus\').val()!=\'activated\' &&  $("#addisStatus").combobox("getValue")==\'stopped\'   ){
//         $.messager.alert(\'提示\', "只有激活状态下才能改为强制停止", \'info\');
//          return;
//     }
      
    weixinActivity.weixinId = $("#idHidden").val();
    weixinActivity.weixinName = $("#addweixinName").val();
    weixinActivity.bannerImgUrl = $("#imgUrlHidden").val().substring(0,$("#imgUrlHidden").val().lastIndexOf(";"));
    weixinActivity.startTime = $("#addstartTime").datebox("getValue");
    weixinActivity.addTimeweixin = $("#addTimeweixin").val();
    weixinActivity.endTime = $("#addendTime").datebox("getValue");
    weixinActivity.groupPrice = $("#addgroupPrice").val();
    weixinActivity.discountLab = $("#adddiscountLab").val();
    weixinActivity.minimumJoinMemberNum = $("#addminimumJoinMemberNum").val();
    weixinActivity.beginWaitTime = $("#addbeginWaitTime").val();
    weixinActivity.sortBy = $("#addorderBy").val();
    weixinActivity.isStatus = $("#addisStatus").combobox("getValue");

    

    doAjax({
        url : appPath + \'/page/weixinActivityAct/saveOrUpdate\',
        type : \'post\',
        data : weixinActivity,
        success : function(data) {
            if (data == "ok") {
                $.messager.alert(\'提示\', "保存成功", \'info\');
                $(\'#opreateHtml\').window(\'close\');
                doQuery();
            } else {
                $.messager.alert(\'提示\', data, \'info\');
            }
        }
    });
}

function deletes(weixinId) {
    if (!weixinId) {
        $.messager.alert(\'提示信息\', \'微信ID异常\', \'info\');
        return;
    }
    $.messager.confirm(\'提示信息\', \'删除会连带其下的商品数据一并删除,你可要想好了?\', function(r) {
        if (r) {
            doAjax({
                url : appPath + "/page/weixinActivityAct/deleteData",
                type : "post",
                data : {
                    "weixinId" : weixinId
                },
                success : function(data) {
                    switch (data) {
                    case "ok":
                        $("#deliveryGrid").datagrid(\'reload\');
                        break;
                    default:
                        $.messager.alert(\'提示信息\', \'抱歉,失败了\', \'error\');
                        break;
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    $.messager.alert(\'提示信息\', \'抱歉,出错了\' + textStatus, \'error\');
                }
            });
        }
    });
}

/*******************************************************************************
 * 查看明细
 * 
 * @param weixinId
 */
function showDetail(weixinId) {

    $(parentWindow.document).find("#frameName").val($(self).attr("name"));
    parentWindow.addTab("微信团商品管理页面", appPath
            + "/page/weixinActivityAct/toPage?weixinId=" + weixinId, "", true,
            "weixinActivityFrame");
}

/*******************************************************************************
 * 上传并提交到后台前调用的方法
 */
function uploadStartFn(file) {
    var checkRes = true;
    var urlList = $("#imgUrlHidden").val().substring(0,$("#imgUrlHidden").val().lastIndexOf(";")).split(\';\');
    if (urlList.length == 5) {
        $.messager.alert("提示信息", "照片最多只能上传5张", "info");
        checkRes = false;
    }

    // check不通过是,取消队列
    if (!checkRes) {
        // 取消当前队列的文件
        swfUploadObj.cancelUpload(file.id, true);
        return false;
    }

    // 开始提交
    swfUploadObj.startUpload();
}

/*******************************************************************************
 * 上传图片成功返回事件
 */
function uploadPicSuccess(file, serverData) {
    try {
        try {
            // 自定义返回信息,并在状态栏显示,如需使用此功能,response.getWriter().write("{code:0,msgType:\'XXX\'}")
            // code为0:成功,code为-1,失败
            serverData = eval("(" + serverData + ")");
            if (typeof (serverData.code) != "undefined" && serverData.code != 0) {
                this.uploadError(file, serverData.code, serverData.msg);
            } else {
                var path = serverData.newFileName;
                // 获取当前时间作为随机值,用于img标签ID
                var randomVal = getTimestamp();

                // 追加img标签,显示上传的图片
                $("#fileList")
                        .append("<div id = \'div"+randomVal+"\'  style=\'display: inline\'><img id=\'img"+ randomVal+ "\'  style=\'border: solid 1px #ccc; padding: 3px; width: 70px; height: 50px; cursor: hand;\' /> " +
                                "<a id=\'a"+randomVal+"\' href=\'javascript:void(0)\' onclick=\'deleteImg(this)\'>删除</a>&nbsp;&nbsp;</div>");
                $("#img" + randomVal).attr("src", "http://img.j1.com" + path);

                // 获取图片URL隐藏域
                var imgUrl = $("#imgUrlHidden").val();
                // ";"分割
                $("#imgUrlHidden").val(imgUrl+"http://img.j1.com" + path+";");

                var progress = new FileProgress(file,
                        this.customSettings.progressTarget);
                progress.setComplete();
                progress.setStatus("完成.");
                progress.toggleCancel(false);
            }
        } catch (e) {
            var progress = new FileProgress(file,
                    this.customSettings.progressTarget);
            progress.setComplete();
            progress.setStatus("完成.");
            progress.toggleCancel(false);
        }
    } catch (ex) {
        this.debug(ex);
    }
}

// 获取时间戳
function getTimestamp() {
    return (new Date()).valueOf();
}

//删除已上传图片
function deleteImg(a){
    //根据<a>标签id获取div、img标签ID
    var divId = "div"+a.id.substring(1);
    var imgId = "img" + a.id.substring(1);
    
    //获取img标签src属性值
    var imgSrc=$("#"+imgId).attr("src");
    //
    $("#imgUrlHidden").val($("#imgUrlHidden").val().replace(imgSrc+";",""));
    
    //删除整个div标签(包含img、a)
    $("#"+divId).remove();
}
复制代码

 

复制代码
==================jsp================================



<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<jsp:include page="/jsp/common/header.jsp"></jsp:include>
<jsp:include page="/jsp/common/common_upload.jsp"></jsp:include>
<script src="${ctx }/js/weixin/weixinActivity.js"></script>
<!--  <input  type="hidden" id="addTime"  /> -->
 
 <input type="hidden" id="addTimeweixin" name="addTimeweixin" value="" />
 <input type="hidden" id="editWeixinStatus" name="editWeixinStatus" value="" />
<script type="text/javascript">
$(function(){
    // 图片上传初始化
    $("#divStatus").hide();
    initSWFUpload({
            flash_url : "${ctx }/js/lib/SWFUpload/Flash/swfupload.swf",
            upload_url : "${ctx }/page/ecUpload/pic/weixinActivity",
            file_post_name : \'uploadFile\',
            use_query_string : true,
            file_size_limit : "150 KB",
            file_types : "*.jpg;*.png;",
            file_types_description : "All Files",
            file_upload_limit : 100,
            file_queue_limit : 0,
            custom_settings : {
                progressTarget : "fsUploadProgress",
                cancelButtonId : "btnCancel"
            },
            debug : false,
    
            // Button settings
            button_image_url : appPath + "/js/lib/SWFUpload/images/uploadall.png",
            button_width : "61",
            button_height : "22",
            button_placeholder_id : "spanButtonPlaceHolder",
            button_text : \'<span class="theFont"></span>\',
            button_text_style : ".theFont { font-size: 16; }",
            button_text_left_padding : 12,
            button_text_top_padding : 3,
            button_action : SWFUpload.BUTTON_ACTION.SELECT_FILE,
    
            // The event handler functions are defined in handlers.js
            file_queued_handler : fileQueued,
            file_queue_error_handler : fileQueueError,
            file_dialog_complete_handler : fileDialogComplete,
            upload_start_handler : uploadStart,
            upload_progress_handler : uploadProgress,
            upload_error_handler : uploadError,
            upload_success_handler : uploadPicSuccess,
            upload_start_handler : uploadStartFn,
            upload_complete_handler : uploadComplete,
            queue_complete_handler : queueComplete
        // Queue plugin event
        });
    });
</script>
<table class="queryTable">
     <tr>
        <td class="queryTitle" width="80px">微信团名称</td>
        <td class="queryContent" ><input class="inputText" type="text" id="weixinName" /></td>
        <td class="queryTitle" width="80px">开始时间</td>
        <td class="queryContent"><input class="inputText easyui-datetimebox" type="text" id="startTime"/></td>
        <td class="queryTitle" width="80px">结束时间</td>
        <td class="queryContent"><input class="inputText easyui-datetimebox" type="text" id="endTime"/></td>
    </tr>
    <tr>
      <td class="queryTitle" width="80px">活动状态</td>
       <td class="queryContent">
            <select class="inputText easyui-combobox" id="isStatus"  style="width: 150px" panelHeight="auto">
                <option value="">请选择</option>
                <c:forEach var="weixinStatus" items="${weixinStatusList }">
                    <option value="${weixinStatus }">${weixinStatus.code }</option>
                </c:forEach>
            </select>
        </td>
        <td class="queryTitle" width="80px">起团人数</td>
           <td class="queryContent" >
           <input class="easyui-numberbox" type="text" id="minimumJoinMemberNum"   /></td>
           
      <td class="queryContent" colspan="8"  align="right"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search"  onclick="doQuery()">搜索</a></td>
       </td>
  </tr>
</table>

<table id="deliveryGrid"></table>  

<div id="opreateHtml" class="easyui-window" title="" iconCls="icon-edit" style="width:320px; height:450px;text-align:center; background: #fafafa;margin:0 auto;">
  <div class="easyui-layout" fit="true">
    <div region="center" border="false" style="background:#fff;border:1px solid #ccc;">
       <form id="form_edit" method="post" name="form_activity">
           <input type="hidden" id="idHidden" name="idHidden" value="" />
           <table class="queryTable"  width="100%">
               <tr>
                   <td class="queryTitle" width="100">微信团名称</td>
                   <td class="queryContent" >
                     <input class="inputText" type="text" id="addweixinName" style="width: 150px" />
                   </td>
              </tr>
             <tr>
                   <td class="queryTitle" width="100">banner图片</td>
                   <td class="queryContent" >
                   <div style="width: 500px; height: auto;">  
                        <div id="fsUploadDiv">
                            <span id="spanButtonPlaceHolder"></span>
                            <div id="content">
                                <div id="divStatus"></div>
                                <div id="fsUploadProgress"></div>
                                <input id="btnCancel" type="button" value="Cancel All Uploads"
                                    onclick="swfu.cancelQueue();" disabled="disabled"
                                    style="margin-left: 2px; font-size: 8pt; height: 25px; display: none" />
                                <span id="batchNoUploadId" style="display: none;"></span>
                            </div>
                        </div>
                        <input type="hidden" id="imgUrlHidden" >
                        <div id="fileList" style="margin-top: 10px; padding-top:10px; font-size: 13px; width:750px">
                        </div>   
                  </div> 
                   </td>
               </tr>
               
               <tr>
                   <td class="queryTitle" width="100">开始时间</td>
                   <td class="queryContent" >
                    <input class="inputText easyui-datetimebox" type="text" id="addstartTime"  />
                   </td>
               </tr>
                   
               <tr>
                   <td class="queryTitle" width="100">结束时间</td>
                   <td class="queryContent" >
                    <input class="inputText easyui-datetimebox" type="text" id="addendTime" />
                   </td>
               </tr>
               <tr>
                   <td class="queryTitle" width="100">团购价格</td>
                   <td class="queryContent" >
                    <input class="easyui-numberbox" type="text" min="0.01"  max="100000000" precision="2"  id="addgroupPrice" style="width: 150px" /><font color="black">&nbsp;元</font>
                   </td>
               </tr>
                <tr>
                   <td class="queryTitle" width="100">折扣标签</td>
                   <td class="queryContent" >
                     <input class="easyui-numberbox" type="text" min="0.01"  max="100000000" precision="2"  id="adddiscountLab"   style="width: 150px"/> <font color="black">&nbsp;折</font>
                   </td>
               </tr> 
               <tr>
                   <td class="queryTitle" width="100">起团人数</td>
                   
                   <td class="queryContent" >
                  
                     <input class="easyui-numberbox" type="text" id="addminimumJoinMemberNum"  style="width: 150px"/>&nbsp;人数
                     
                       <div style="float:right" ><font color="red">  * 起团人数 上限99 下限2 </font></div>
                   </td>
               </tr>
               <tr>
                   <td class="queryTitle" width="100">团长开团等待时间</td>
                   <td class="queryContent" >
                      <input class="inputText" type="text" id="addbeginWaitTime" style="width: 150px" />&nbsp;小时
                       <div style="float:right" ><font color="red">  *  团长开团等待时间 必须是24的倍数 上限120</font></div>
                   </td>
               </tr>
               <tr>
                   <td class="queryTitle" width="100">手动排序</td>
                   <td class="queryContent" >
                       <input class="easyui-numberbox" precision="0" type="text" id="addorderBy"  style="width: 150px"/>
                   </td>
              </tr>
               <tr>
                 <td class="queryTitle" width="80px">活动状态</td>
                <td class="queryContent">
                    <select class="inputText easyui-combobox" id="addisStatus"  style="width: 150px" panelHeight="auto">
                        <c:forEach var="weixinStatus" items="${weixinStatusList }">
                            <option value="${weixinStatus }">${weixinStatus.code }</option>
                        </c:forEach>
                    </select>
        </td>
              </tr>
           </table>
       </form>
    </div>
   <div region="south" border="false"
            style="text-align: center; height: 30px; line-height: 30px;">
            <a class="easyui-linkbutton" iconCls="icon-ok"
                href="javascript:void(0)" onclick="save()">保存</a> <a
                class="easyui-linkbutton" iconCls="icon-cancel"
                href="javascript:void(0)" onclick="closeWin();">关闭</a>
        </div>
   </div>
</div>
复制代码

以上是关于jquery之批量上传图片的主要内容,如果未能解决你的问题,请参考以下文章

批量上传图片(jQuery-File-Upload使用)

小程序之批量上传图片

在php中使用jquery uploadify进行多图片上传

android之使用GridView+仿微信图片上传功能(附源代码)

jquery之图片上传

图片的批量导入实现和对主键生成策略的思考