zoukankan      html  css  js  c++  java
  • SWFUpload一个强大的文件上传神器(学习二)实战

    1、引入swfupload.js

    <script type="text/javascript" src="/assets/ueditor/third-party/swfupload/swfupload.js"></script>

    2、实例化swfupload对象,并传入参数配置对象

    封装image.load.js

    var ImageUpload = {
        swfUpload: function (btn, addr) {
            var $btn = $(btn).parent();
            new SWFUpload({
                flash_url: "/assets/ueditor/third-party/swfupload/swfupload.swf", // swfupload.swf文件的绝对或相对地址
                upload_url: "/swfupload/img/upload4Type?type=1", // 处理上传文件的服务器端页面的url地址
                file_size_limit: "10 MB", // 指定要上传的文件的最大体积
                file_types: "*.*",// 指定了允许上传的文件类型,当有多个类型时使用分号隔开,比如:*.jpg;*.png ,允许所有类型时请使用 *.*
                file_types_description: "All Files", // 指定在文件选取窗口中显示的文件类型描述,起一个提示和说明的作用吧
                file_upload_limit: 100, // 上传文件了,也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。
                file_queue_limit: 0,
                debug: false,
                button_image_url: "/assets/ueditor/third-party/swfupload/images/XPButtonUploadText_61x22.png", // 指定Flash按钮的背景图片,相对地址或绝对地址都可以。
                button_ "61", // 指定Flash按钮的宽度
                button_height: "22", // 指定Flash按钮的高度
                button_placeholder: btn, // 指定一个dom元素,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符。当button_placeholder_id与button_placeholder都存在时,以button_placeholder_id为优先
                button_placeholder_id: "###invalidforfirefox###",
                button_text: '', // 指定Flash按钮上的文字,也可以是html代码
                button_text_style: ".theFont { font-size: 16; }",
                button_text_left_padding: 12,
                button_text_top_padding: 3,
                file_dialog_complete_handler: fileDialogComplete, // 当文件选取完毕且选取的文件经过处理后(指添加到上传队列),会立即触发该事件。可以在该事件中调用this.startUpload()方法来实现文件的自动上传
                upload_start_handler: uploadStart, // 当文件即将上传时会触发该事件
                upload_error_handler: uploadError, // 文件上传被中断或是文件没有成功上传时会触发该事件
                upload_success_handler: uploadSuccess, // 当一个文件上传成功后会触发该事件
                upload_complete_handler: uploadComplete //     当一次文件上传的流程完成时(不管是成功的还是不成功的)会触发该事件,该事件表明本次上传已经完成,上传队列里的下一个文件可以开始上传了。该事件发生后队列中下一个文件的上传将会开始
            });
    
            function uploadSuccess(file, serverData) { // 参数file object为文件信息对象 参数server data为服务器端输出的数据
                var json = decodeURI(serverData);
                json = eval('(' + json + ')');
                var code = json.code;
                var msg = json.msg;
                if (code == "0") {
                    alert(1111)
                    $(addr).val(json.map.url); // input框的值为服务器返回的地址
                    if ($btn.parent().find("img").length > 0) {
                        $btn.parent().find("img").attr("src", json.map.url); // 让图片链接下面的图片显示出来
                    }
                } else {
                    alert(msg);
                }
            }
    
            function fileQueued() {
            }
    
            function fileQueueError() {
            }
    
            function fileDialogComplete() {
                this.startUpload();
            }
    
            function uploadStart() {
            }
    
            function uploadError() {
                alert("upload error");
            }
    
            function uploadComplete() {
    
            }
        }
    
    }

    引入image.load.js

    <script type="text/javascript" src="/assets/ueditor/third-party/swfupload/swfupload.queue.js"></script>

    在主js里面调用ImageUpload.swfUpload来实例化SWFUpload对象

    var FinishSuperEntrance = {
        swfUpload: function (btn, addr) {
            ImageUpload.swfUpload(btn, addr);
        }
    }
    
    $(".upload-btn-img").each(function (i, e) {
         var input = $(e).parents(".popup-item").prev().find("input").eq(1);
         FinishSuperEntrance.swfUpload(e, input);
    });

    3、点击SWFUpload提供的Flash按钮,弹出文件选取窗口选择要上传的文件

    <span class="upload-btn-img"></span>

    这个是我们准备好的占位元素,swfupload实例化之后会被flash按钮替换

    4、文件选取完成后符合规定的文件会被添加到上传的队列里

    5、调用startUpload方法让队列里文件开始上传

    function fileDialogComplete() {
             this.startUpload();
    }

    6、文件上传过程中会触发相应的事件,开发者利用这些事件来更新ui、处理错误、发出提示等等;

  • 相关阅读:
    Oracle 验证A表的2个字段组合不在B表2个字段组合里的数据
    jQuery方法一览
    Maven构建项目时index.jsp文件报错
    DDL——对数据库表的结构进行操作的练习
    不经意的小错误——onclick和click的区别
    UML基础——统一建模语言简介
    基于UML的面向对象分析与设计
    数据结构之——树与二叉树
    UML类图几种关系的总结
    C3P0连接参数解释
  • 原文地址:https://www.cnblogs.com/kunmomo/p/12567832.html
Copyright © 2011-2022 走看看