SWFObject文件上传插件的使用教程

它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外,它能够避免您的 HTML、XHTML中出现object、embed等非标准标签,从而符合更加标准。

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 > 0) {//选择并添加到上传队列的文件数大于0
            openfujian = queuedNum;
            this.startUpload();//开始上传
            this.setButtonDisabled(true);//禁用上传按钮
            OpenDialog('<div id="fujianbox" style="overflow-y: scroll;height: 180px;"></div>', '上传进度', 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 <= 18) {
                name = name.substr(0, 18);
            } else {
                name = name.substr(0, 15) + '...';
            }
            if (size > 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 <= 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&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_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>

时间: 2024-10-02 08:58:00

SWFObject文件上传插件的使用教程的相关文章

20+ 个很棒的 jQuery 文件上传插件或教程(此文值得“推荐”和“收藏”)

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. Aja

20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. Aja

分享20多个很棒的jQuery 文件上传插件或教程_jquery

1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上

基于jQuery 20款文件上传插件介绍

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. php

Jquery文件上传插件:Jquery html5 uploader

文章简介:Jquery html5 uploader插件使用笔记. Jquery html5 uploader 是Jquery的一个文件上传插件,支持拖拽上传,但要求浏览器支持html5 1.下载插件 http://www.igloolab.com/jquery-html5-uploader/ 具体演示也可在这里看到. 2.引入不要文件 <script type="text/javascript" src="http://ajax.googleapis.com/ajax

图片-请教bootstrap-fileinput-master 多文件上传插件大神

问题描述 请教bootstrap-fileinput-master 多文件上传插件大神 总是提示没有选择文件,请问如何解决.要准确答案.

html5-基于Bootstrup 3可预览的HTML5文件上传插件,Ajax上传方式,如何做出响应?

问题描述 基于Bootstrup 3可预览的HTML5文件上传插件,Ajax上传方式,如何做出响应? http://www.htmleaf.com/html5/html5muban/201505091801.html 查看演示中,最后一个上传方式是用Ajax方式上传,那么如何才能做出响应呢? 我上传成功后显示 我书读的少,求大神告诉我这个应该怎么写? 解决方案 基于ajax的Html5文件上传插件,带进度并支持图片预览 解决方案二: http://blog.csdn.net/pkgray/art

Web Uploader文件上传插件使用详解_javascript技巧

WebUploader文件上传组件在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用. 采用大文件分片并发上传,极大的提高了文件上传效率. 一.功能介绍 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度. 预

基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解_javascript技巧

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/