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_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>

SWFObject文件上传使用记录的更多相关文章

  1. springboot文件上传问题记录

    最近做项目需要开发一个通过excel表格导入数据的功能,上传接口写好调试的时候遇到几个问题,记录一下. 报错1: 15:50:57.586 [[1;33mhttp-nio-8763-exec-8 [0 ...

  2. JavaScript,php文件上传简单实现

    非ajax,非iframe,最原始使用file控件的文件上传,记录过程备忘.(同步,页面刷新) 实现目标,能够将文件上传到指定位置. 客户端用input的file控件: <form action ...

  3. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  4. 记录Tomcat8.5文件上传,文件权限无法访问

    部署一个服务,文件上传本地可以,但是在Linux上通过docker发布到容器上,文件上传后,没有权限访问,查了好久才发现是Tomcat8.5的问题,低版本没有这个问题,现记录下. tomcat/bin ...

  5. hadoop学习记录--hdfs文件上传过程源码解析

    本节并不大算为大家讲接什么是hadoop,或者hadoop的基础知识因为这些知识在网上有很多详细的介绍,在这里想说的是关于hdfs的相关内容.或许大家都知道hdfs是hadoop底层存储模块,专门用于 ...

  6. 使用bootstrap fileinput多文件拖拽上传的记录

    今天琢磨文件上传,刚好看到bootstrap 我就搜了一下,刚刚能满足需求,使用上手也很快,使用完还是记录下来. 1.首先我们下载插件包,可以用nuget搜索bootstrap-fileinput 也 ...

  7. JavaWeb学习记录(二十三)——文件上传与下载

    一.导入jar包

  8. springMVC学习记录3-拦截器和文件上传

    拦截器和文件上传算是springmvc中比较高级一点的内容了吧,让我们一起看一下. 下面先说说拦截器.拦截器和过滤器有点像,都可以在请求被处理之前和请求被处理之到做一些额外的操作. 1. 实现Hand ...

  9. bootstrap File Input 多文件上传插件使用记录(二)删除原文件

    在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...

随机推荐

  1. 用Hopper搞定Mac迅雷的会员以及离线下载功能

    转自 用Hopper搞定Mac迅雷的会员以及离线下载功能 先定位Mac迅雷的可执行文件 snakeninnys-iMac:~ snakeninny$ ls /Applications/Thunder. ...

  2. vs2012快捷键

    (1)自己整理的使用频率最高的快捷键(建议大家亲身体验一下!这样才会在潜移默化中运用得到!) (这里省去了很多大家闭上眼都会操作的什么Ctrl+S 等等操作 给出的大多是不常用但是很有用的快捷键组合! ...

  3. 【USACO 1.5.2】回文质数

    [题目描述] 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围[a,b](5 <= a < b <= 100,0 ...

  4. 谈谈IT人的发展[转载]

    一个人如果能确定他喜欢的行业,他一生都会非常幸福.   相反,则往往痛苦,也许竟然会因此成为一个哲学家也说不定. 中国的贫穷决定了我们当中的大多数人不能根据自己的爱好来选择职业,而只是因为生活所迫,或 ...

  5. 手机端MVC-js框架-Gillie-中文版本

    译者声明: 1.代码库发布在http://pablovallejo.github.io/gillie/ 2.查看API介绍直接戳这里看整理. Gillie是一个轻型MVC框架,受Backbone的启发 ...

  6. 开始编写正式的iOS 程序(iOS编程指导)

    App设计基础 在确定了你的App主要功能后,需要把它转化为代码.如果你是第一次开发属于自己的iOS App,需要花些时间熟悉基本概念.iOS内置了很多设计样式,多了解下能对你以后有帮助. 初稿 设计 ...

  7. Linux makefile 教程 非常详细,且易懂(转)

    转自:http://blog.chinaunix.net/uid-27717694-id-3696246.html 原文地址:Linux makefile 教程 非常详细,且易懂 作者:Deem_pa ...

  8. highCharts 图表统计控件使用方法

    1.首先引用js文件 在引用上面文件时,保证已经引用了jquery.js文件.且位置在上面两个文件之前. 2. <div id="container" style=" ...

  9. JQUERY1.9学习笔记 之基本过滤器(八) 最后元素选择器

    最后元素选择器 jQuery( ":last" ) 描述:选择与之匹配的最后元素. 例:选择表格的最后一行. <!DOCTYPE html><html lang= ...

  10. ARM9的MMU

    一 页表 1. 页表是放置在RAM(一般为DRAM)中的一个数据段. 2. ARM的地址空间为2^32字节,即4G字节. 3. 一级页表总共有4096条记录,每条记录对应的地址块为1M,一级页表中的记 ...