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="width: 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_width: 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>

效果图:

时间: 2024-11-12 19:57:26

swfupload多图上传插件(ASP.NET)的相关文章

Vue的移动端多图上传插件vue-easy-uploader

原文地址 前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳永逸,以后可以直接使用. 目前vue-easy-uploader已上传到GitHub和NPM,使用起来方便简单,不需要繁琐的配置即可投入生产,不过需要后端配合,实现上传接口. 本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader 本项

Bootstrap FileInput 多图上传插件 文档属性说明

Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source=itdadao&utm_medium=referral这货融合bootstrap框架,界面相当不错,api非常丰富,可定制内容能满足绝大数的场景. 最近在撸一个项目,用到它,花时间收集了一些文档,整理并翻译了部份内容.备用. github 地址 https://github.com/kartik-

yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 文件上传也写过几篇文章了,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛

ThinkPHP+swfupload多图上传实例 经典实用的php多图上传

先上一张图片给大家看看效果,有需要就下载学习.不一定非要在ThinkPHP里,只是我非常喜欢去用ThinkPHP做开发了. 好了.现在咱们需要的东西是,下载一个swfupload.js网上很多,自己百度吧.之前有人加我QQ说我写的博文大部分都是代码,看不懂,我以后写博文也先说明思路,然后开始贴代码分享 整个多图上传的流程 1.写好html代码,包括上传以后显示的效果的html,以及加载swfupload组件.和flash 2.在添加图片以后上传到php里处理上传并且返回上传图片的地址,加载到预览

帝国CMS7.2新增多图同时上传插件,上传多图效率更高

原来上传多图文件,需要挨个选择文件,然后再点批量上传,比较麻烦.所以帝国CMS7.2新增了多图上传插件:为采用FLASH方式实现同时选择多个图片一起上传,提高多图上传效率. 帝国CMS多图上传插件特性如下: 1.采用FLASH方式实现同时选择多个图片一起上传. 2.多图插件安装后,在以下3个地方可以使用: (1).信息上传图片时; (2).图集字段morepic上传图片时; (3).编辑器多图片上传时. 3.上传图片后显示格式采用单独模板文件,用户可自行修改返回格式模板文件,很个性化. 4.本插

SWFUpload批量上传插件

SWFUpload是一个批量上传插件,在HTML4.1里面,估计也只有Flash+javascript配合才能够做到了.先复制个重要的网址,这个应该是官方的文档了,相当齐全. http://leeon.me/upload/other/swfupload.html#uploadStart 这个是格式比较好看的. http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 算了,这个文档的内容太多,各种属性各种方法,记不了这么多,直接贴上个

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 简要教程 ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 安装 可以通过bower或npm来安装ssi-uploader文件上传插件. b

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码]

原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示.这次我们演示利用swfupload多文件上传,项目上文件上传是比不可少的,大家这个心里都知道.主要提供给源码说明及下载 最终效果图: SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏

兼容IE的头像上传插件的设计方法(asp.net mvc)

使用了两个插件 1.文件上传插件uploadify 2.图像编辑插件jquery.Jcrop 基于Asp.net的mvc设计模式,设计了该插件 下面贴代码: view(.cshtml): <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="~/Bo