• 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;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>
  • 相关阅读:
    使用Eclipse 创建Spring Boot项目
    springMVC中文乱码问题
    Java POI Excel 导入导出
    springMVC + quartz实现定时器(任务调度器)
    spring配置Converter、Formatter日期转换器
    springMVC+springJDBC+Msql注解模式
    基于JavaScript封装的Ajax工具类
    H5音乐播放器
    JavaWeb+MySql分页封装
    JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
  • 原文地址:https://www.cnblogs.com/huhangfei/p/5012990.html
Copyright © 2020-2023  润新知