SWFObject文件上传使用记录

SWFObject文件上传使用方法记录,该插件使用起来相当强大也很灵活，与uploadify各有千秋。
值得一说的是,如果要设置button_image_url这个参数，该参数是按钮的背景图，但是一定要是4张等高纵向并列，如下图。

SWFObject文件上传使用记录

设置该参数虽然能达到修饰背景的效果，但是你会发现，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 >);
        }
    }
    //上传过程事件处理
    //用来动态显示文件上传进度
    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;swfupuser=@userinfo.UserName", //接收上传的服务端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_ 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>

SWFObject文件上传使用记录

相关推荐