zoukankan      html  css  js  c++  java
  • swfupload多图上传插件(ASP.NET)

       <script src="../js/swfupload/swfupload.js" type="text/javascript"></script>
    
        <script src="../js/swfupload/swfupload.queue.js" type="text/javascript"></script>
    
        <script src="../js/swfupload/fileprogress.js" type="text/javascript"></script>
    
        <script src="swfMgr/handlers.js" type="text/javascript"></script>
    
    
    
       <tr <%=tp_addList %> id="tp_addList">
                    <td class="left_title_2" width="100px">
                        上传图片列表:
                    </td>
                    <td id="Td1">
                        <%--上传多个图片--%>
                        <div align="left">
                            <input id="middleImg" /><span style="color: Red;">注明:图片以(655*500),单个文件最大5000KB;默认设置最后一张为首页图片,图片名不能重复,一张张按照顺序上传</span>
                            <p id="fileQueue2" style=" 320px; margin: 0 auto;">
                            </p>
                            <ul id="ulList">
                            </ul>
                        </div>
                    </td>
                </tr>
    
    
    
    
     <asp:HiddenField ID="hidStr" runat="server" Value="" />
      <asp:HiddenField ID="hidFolder" runat="server" Value="0" />
    
    
    
        <script type="text/javascript">
            var tmpFolder = $("#hidFolder").val();
            var tmpNum = 0;
            var tmpTotal = 0;
    
            function uploadSuccessOther(file, serverData) {
                try {
                    var progress = new FileProgress(file, this.customSettings.upload_target);
                    progress.setComplete();
                    progress.setStatus("正在上传!");
                    progress.toggleCancel(false);
                } catch (ex) {
                    //alert(ex.message);
                }
                //成功后,处理
                $("#ulList").append('<li><table><tbody><tr><td><img width="100" src="../../img/' + tmpFolder + '/100/' + serverData + '"></td></tr><tr><td><label><input type="radio" class="setIndex" style="margin-right: 5px;" name="rdo" value="' + serverData + '">首页显示</label>&nbsp;<a style="color: Red;" href="javascript:;" class="delImg">删除</a></td></tr></tbody></table></li>');
                $("#info_tp_add").val(serverData); //隐藏图片路径
    
                tmpTotal += 1;
                if (tmpNum == tmpTotal) {
                    $(".ajaxloading").hide();
                    window.onbeforeunload = function() { };
                    $(".saveClass").removeAttr("disabled", "disabled");
                }
            }
    
            function fileDialogCompleteOther(numFilesSelected, numFilesQueued) {
                try {
                    tmpNum = parseInt(numFilesQueued);
                    if (tmpNum > 0) {
                        this.startUpload();
                        $("#divLoading").css({ height: $(window).height() + 150 + tmpNum * 50 });
                        $(".ajaxloading").css({ top: $(window).scrollTop() + 150 }).show();
                        //  $(".saveClass").attr("disabled", "disabled"); //在上传过程中将保持按钮禁用
    
                        //  window.onbeforeunload = function() { return ("确认离开当前页面吗?未保存的数据将会丢失!"); }
                    } else {
                    }
                } catch (ex) {
                    //this.debug(ex);
                }
            }
    
            //
            var swfMiddle;
            window.onload = function() {
                swfMiddle = new SWFUpload({
                    // Backend Settings
                    upload_url: "swfMgr/Handler.ashx",
                    post_params: {
                        'ASPSESSID': '<%=Session.SessionID %>',
                        'Folder': tmpFolder,
                        't': 'i'
                    },
    
                    // File Upload Settings
                    file_size_limit: "5000",
                    file_types: "*.jpg;*.png",
                    file_types_description: "JPG,PNG",
                    file_upload_limit: 0,    // Zero means unlimited
    
    
                    swfupload_preload_handler: preLoad,
                    swfupload_load_failed_handler: loadFailed,
                    file_queue_error_handler: fileQueueError, //队列错误
                    file_dialog_complete_handler: fileDialogCompleteOther,
                    upload_progress_handler: uploadProgress,
                    upload_error_handler: uploadError,
                    upload_success_handler: uploadSuccessOther,
                    upload_complete_handler: uploadComplete,
    
                    // Button settings
                    button_image_url: "../js/swfupload/buttons/XPButtonNoText_61x22.png",
                    button_placeholder_id: "middleImg",
                    button_ 61,
                    button_height: 22,
                    button_text: '<span class="button">添加图片<span class="buttonSmall"></span></span>',
                    button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12px;font-weight:bold;} .buttonSmall { font-size: 12px; }',
                    button_text_top_padding: 1,
                    button_text_left_padding: 5,
    
                    button_cursor: SWFUpload.CURSOR.HAND,
                    button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
    
                    // Flash Settings
                    flash_url: "../js/swfupload/swfupload.swf", // Relative to this file
                    flash9_url: "../js/swfupload/swfupload_FP9.swf", // Relative to this file
    
                    custom_settings: {
                        upload_target: "fileQueue2"
                    }
                    //图片上传
                });
            }
    
    
            
        </script>
    
        <script type="text/javascript">
            $(function() {
    
                //删除该上传图片
                $(document).delegate(".delImg", "click", function() {
                    if ($(this).prev().find("input").attr("checked")) {
                        alert('已经设置首页的图片无法删除!');
                        return false;
                    }
    
                    if (!confirm("确定要删除这张图片吗?")) return false;
                    var tmpLi = $(this).parents("li").eq(0);
                    $.post("swfMgr/fileMgr.ashx", {
                        t: "del",
                        f: $("#hidFolder").val(),
                        n: $(this).prev().find("input").val()
                    }, function(rdata) {
                        if (rdata = "1") {
                            tmpLi.remove();
                        }
                    });
                });
    
                //首页显示
                $(document).delegate(".setIndex", "click", function() {
                    var value = $(this).val();
                    if (!confirm("确定要设置这张图片首页显示吗?")) return false;
                    $("#info_tp_add").val(value); //确定保存后隐藏图片路径
                });
            });
        </script>

    效果图:

  • 相关阅读:
    phpcms列表页调用 点击量
    详解响应式布局设计
    PHPCMS V9 全站通用日期时间标签
    phpcms v9模板制作常用代码集合(转)
    Oracle 学习之 Select 1
    Oracle 学习之exists
    Hive学习之数据去重
    Hive学习之Union和子查询
    Clojure学习之defmulti
    Clojure学习之比线性箭头操作
  • 原文地址:https://www.cnblogs.com/vanteking/p/4074228.html
Copyright © 2011-2022 走看看