SWFUpload一个强大的文件上传神器（学习二）实战

Posted 2021-03-03 坤嬷嬷

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_width: "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、处理错误、发出提示等等；