SWFObject文件上传使用记录

SWFObject文件上传使用方法记录,该插件使用起来相当强大也很灵活，与uploadify各有千秋。

值得一说的是,如果要设置button_image_url这个参数，该参数是按钮的背景图，但是一定要是4张等高纵向并列，如下图。

设置该参数虽然能达到修饰背景的效果，但是你会发现，flash在加载该图片的时候是有延迟的，所以呈现出来的效果就是，闪一下才能出来。

要解决这个问题，就只能绕道而行，放弃使用改参数。我们将插件的容器父窗体进行样式修饰，达到想要的结果，然后将插件的flash设置好宽高,重要的一点就是要设置flash为透明的。

button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT

以下为示例代码~~~以及说明注释，详细参数还是去找度娘吧，网上各篇文章略有差异。

<script type="text/javascript">

    var fujians = [];

    var fileid = 0;

    var queudid = "";

    var openfujian = 0;

    //文件选择窗口关闭事件处理

    //如果有文件成功选择并添加到上传队列，则自动上传

    function fileDialogComplete(selectedNum, queuedNum) {

        if (queuedNum &gt; 0) {//选择并添加到上传队列的文件数大于0

            openfujian = queuedNum;

            this.startUpload();//开始上传

            this.setButtonDisabled(true);//禁用上传按钮

            OpenDialog('&lt;div id="fujianbox" style="overflow-y: scroll;height: 180px;"&gt;&lt;/div&gt;', '上传进度', 285, 225);

        }

    }

    //上传过程事件处理

    //用来动态显示文件上传进度

    function uploadProgress(file, curBytes, totalBytes) {

        var f = file;

        var c = curBytes;

        var t = totalBytes;

        var w = 235 * (curBytes / totalBytes);

        if ($("#fujianbox")) {

            if (queudid != f.id) {

                queudid = f.id;

                //操作

            } else {

                $("#queudid" + f.id).css("width", w + "px");

                $("#baifenbi" + f.id).html("("+(parseInt((curBytes / totalBytes) * 100) + "%")+")");

            }

        }

    }

    //上传过程中出错

    function uploadError(file, errCode, msg) {

        openfujian--;

    }

    //上传成功

    function uploadSuccess(file, data) {

        var name = file.name;

        var size = file.size;

        var type = file.type;

        var id = file.id;

        var filestatus = file.filestatus;

        var dataid = data;

        if (fileid == 0) {

            $("#bbsfiles").append("已上传附件：");

        }

        if (name.length &lt;= 18) {

                name = name.substr(0, 18);

            } else {

                name = name.substr(0, 15) + '...';

            }

            if (size &gt; 1024 * 1024) {

                size = (((size / 1024 / 1024).toFixed(2))) + 'MB';

            } else {

                size = (Math.round(size / 1024)) + 'KB';

            }

            //操作

            fileid++;

        //alert(file,data);

    }

    //上传完成，无论上传过程中出错还是上传成功，都会触发该事件，并且在那两个事件后被触发

    function uploadComplete(file) {

        openfujian--;

        if (openfujian &lt;= 0) {

            this.setButtonDisabled(false);//恢复上传按钮

            hideDiv('messagebox_win');

        }

        this.startUpload();//开始上传

    }

    function cancelUploads(id) {

        aswfu.cancelUpload(id);

    }

    var aswfuOption = {//swfupload选项

        upload_url: "http://www.huhangfei.com.cn/bbsupload/fileupasp2015.asp?CookieID=@CookieID&amp;[email protected]", //接收上传的服务端url

        flash_url: "http://bbs.huhangfei.com.cn/images/swfupload2015215.swf",//swfupload压缩包解压后swfupload.swf的url

        button_placeholder_id: "fl",//上传按钮占位符的id

        file_size_limit: "20MB",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB

        prevent_swf_caching:false,

        button_width: 89, //按钮宽度

        button_height: 34, //按钮高度

        button_text: '',//按钮文字

        button_text_style: '',//按钮文字样式

        button_text_top_padding: 6,//文字距按钮顶部距离

        button_text_left_padding: 65,//文字距离按钮左边距离

        button_image_url: "",//"http://simg.huhangfei.com.cn/bbs/revision/images/fj.jpg",//按钮背景

        button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,

        //debug: true,//开启调试模式

        file_dialog_complete_handler: fileDialogComplete,//文件选择对话框关闭

        upload_progress_handler: uploadProgress,//文件上传中

        upload_error_handler: uploadError,//文件上传出错

        upload_success_handler: uploadSuccess,//文件上传成功

        upload_complete_handler: uploadComplete,//文件上传完成，在upload_error_handler或者upload_success_handler之后触发

        //这个地方在windows上有个bug，官方如是说：在window平台下，那么服务端的处理程序在处理完文件存储以后，必须返回一个非空值，否则此事件不会被触发，随后的uploadComplete事件也无法执行。

        //post_params: { "CookieID": "@CookieID", "swfupuser": "@userinfo.UserName" },

        file_types: "*.doc;*.docx;*.txt;*.zip;*.rar;*.caj;*.pdf;*.vip;",

        file_types_description: "['doc','docx','txt','zip','rar','caj','pdf','vip']"

    }

var aswfu = new SWFUpload(aswfuOption);

function DeleteFujian(id) {

    $("#fujian" + id).remove();

    BBsPost.deleteFujian(id);

    fileid--;

    if (fileid == 0) {

        $("#bbsfiles").html("");

    }

}

</script>