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) {//选择并添加到上传队列的文件数大于0openfujian = 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", //接收上传的服务端urlflash_url: "http://bbs.huhangfei.com.cn/images/swfupload2015215.swf",//swfupload压缩包解压后swfupload.swf的urlbutton_placeholder_id: "fl",//上传按钮占位符的idfile_size_limit: "20MB",//用户可以选择的文件大小,有效的单位有B、KB、MB、GB,若无单位默认为KBprevent_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>

转载于:https://www.cnblogs.com/huhangfei/p/5012990.html

SWFObject文件上传使用记录相关推荐

  1. php文件上传学习记录

    php文件上传学习记录 1.多文件上传及预览功能效果: 代码分两部分: 1.index02.html 2.file_preview.php 1.index02.html: <!DOCTYPE h ...

  2. github/gitee码云文件上传提交记录教程

    例如上传提交一个文件到gitee(码云)上,例如这个轮播图代码 1 //git初始化 git init 2 //获取git文件状态 git status 可以看出文件还没有commit 3 git a ...

  3. post请求文件上传(个人记录)

    集合上传文件/图片路径 @RequestMapping(value = "/uploadImage",method = RequestMethod.POST,headers = & ...

  4. 文件上传漏洞小结与Upload-labs 靶场纪实

    WEB安全--文件上传靶场记录 文章目录 WEB安全--文件上传靶场记录 文件上传的思路与分类(图片转自小迪): 一.前端验证的绕过 Pass 01 二.验证绕过--白名单 1.MIME验证绕过 pa ...

  5. CTF学习记录 i春秋 《从0到1:CTFer成长之路》文件上传

    21.10.19 第二次开始学习CTF 感觉很有收获 至少有让自己忙起来了的感觉 感觉有一些学习状态了 打算重新记录一下学习笔记!加油 我会坚持下去的! 题目代码 首先附上题目的代码段(不完整) sh ...

  6. 记录华为OBS文件上传下载多种方式

    公司要从阿里的oss切换到华为的obs,为了尽量小代价的改动,所以想找和阿里一样上传的方式,之前阿里做的是后端生成文件上传的url,前端做上传动作,这里记录一下obs的多种上传方式.直接上代码: 1. ...

  7. 【问题记录】tp5文件上传$_FILES有值request中file却为空

    文章目录 前言 问题 排除尝试 前端 后端 小结 前言 在整理一套php代码的时候,需要添加文件上传功能,虽说我对php不算怎么熟悉,但是我想着一个简单的文件上传其实就form表单的提交能有多麻烦,谁 ...

  8. VUE+Spring Boot,文件上传el-upload报错--Current request is not a multipart request,记录

    做了个简单的文件上传功能,测试时发现报错Current request is not a multipart request,网上查了很多办法,记录一下: 1.最多的:当前请求不是multipart ...

  9. SpringMVC(SSM)框架搭建JavaWeb项目时,前端页面文件上传,后台Java下载功能实现及相关问题记录说明

    看在前面:前端页面通过input控件实现文件上传,后台Java使用SpringMVC框架的实现网上有较多教程,但是真正配置一遍下来不报错的较少,所以本博客前面先介绍一遍完整的设置步骤,然后介绍遇到的一 ...

最新文章

  1. 2021年4月27日 华为Cloud AI 通用软件开发实习面试(一面)
  2. SAP Spartacus 中,Angular <ng-container>使用的一个例子
  3. 添加 XmlDocument 元素 和 属性
  4. 5.4.2 Using Hibernate templates
  5. mysql查询bween_MySQL常用查询语句(23个)
  6. php中简单ubb案例,php Ubb代码编辑器函数代码
  7. 写歌词的技巧和方法,写歌词的基本要求,歌词创作基本知识及注意事项,创作歌词的要点
  8. 解决Iphonex 底部按钮fixed,bottom:0 底部留白问题
  9. 张家港、张家口、张家界、张家川
  10. 【XJTUSE计算机图形学】第三章 几何造型技术(3)——B样条曲线与曲面
  11. Win10 安装node.js
  12. react navigation 中使用goBack()跳转到指定页面
  13. StarRocks Parser 源码解析
  14. 定义采购申请凭证类型
  15. 局域网内两台主机 IP ping 不通的问题分析
  16. 房地产大数据分析软件_房地产大数据公司案例
  17. 真正解决layer弹层遮罩挡住窗体的问题
  18. DeepMind创始人Demis Hassabis:AI 的强大,超乎我们的想象
  19. 74HC244;74HCT244——三态八路缓冲器/线路驱动器
  20. 金蝶eas服务器文件更新端口,金蝶eas更换服务器地址

热门文章

  1. 【Pyecharts|GEO-Lines】全球航线图的绘制
  2. 如何自动生成独一无二的漂亮高分辨率图片 - 图片背景生成器教程
  3. Global Mapper 24安装教程
  4. 2022年信息物理系统与物联网国际会议(CPSIOT 2022)
  5. VMware | 装虚拟机后root默认密码 | su: Authentication failure
  6. (2023最新)Java毕业设计参考题目-题目新颖(值得收藏)
  7. QDir的mkpath和mkdir的区别
  8. 对称加密及AES加密算法
  9. 如何用 Python 做一个简单的翻译工具?
  10. 写数学作业用计算机,用计算机做数学作业实践.PDF