图片上传编辑插件SWFUpload使用详解

HTML5 herman 1668浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

在这个互联网泛滥的年代,任何需要用户注册的网站都慢慢的开始搞起实名认证。实名认证就离不开图片上传的功能。有些网站需要对要上传的图片进行编辑后在上传。本文将使用SWFUpload插件来解决你的诉求。

插件效果预览图

SWFUpload 插件运行效果预览图

swfupload 在线编辑效果

SWFUpload 插件的使用流程

  1. 引入相应的js文件 
  2. 实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置。 
  3. 点击SWFUpload提供的Flash按钮,弹出文件选取窗口选择要上传的文件; 
  4. 文件选取完成后符合规定的文件会被添加到上传的队列里; 
  5. 调用startUpload方法让队列里文件开始上传; 
  6. 文件上传过程中会触发相应的事件,开发者利用这些事件来更新ui、处理错误、发出提示等等;

使用 SWFUpload 插件

SWFUpload包括三部分的内容:SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。所以首先在页面引入SWFUpload.js。

<script src='SWFUpload.js'></script>

然后在页面中实例化一个SWFUpload对象:

var swfu;  
window.onload = function () {  
var settings_object = {//定义参数配置对象  
upload_url : "http://www.swfupload.org/upload.php",  
flash_url : "http://www.swfupload.org/swfupload.swf",  
file_post_name : "Filedata",  
post_params : {  
"post_param_name_1" : "post_param_value_1",  
"post_param_name_2" : "post_param_value_2",  
"post_param_name_n" : "post_param_value_n"  
},  
use_query_string : false,  
requeue_on_error : false,  
http_success : [201, 202],  
assume_success_timeout : 0,  
file_types : "*.jpg;*.gif",  
file_types_description: "Web Image Files",  
file_size_limit : "1024",  
file_upload_limit : 10,  
file_queue_limit : 2,  
debug : false,  
prevent_swf_caching : false,  
preserve_relative_urls : false,  
button_placeholder_id : "element_id",  
button_image_url : "http://www.swfupload.org/button_sprite.png",  
button_width : 61,  
button_height : 22,  
button_text : "<b>Click</b> <span class="redText">here</span>",  
button_text_style : ".redText { color: #FF0000; }",  
button_text_left_padding : 3,  
button_text_top_padding : 2,  
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,  
button_disabled : false,  
button_cursor : SWFUpload.CURSOR.HAND,  
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,  
swfupload_loaded_handler : swfupload_loaded_function,  
file_dialog_start_handler : file_dialog_start_function,  
file_queued_handler : file_queued_function,  
file_queue_error_handler : file_queue_error_function,  
file_dialog_complete_handler : file_dialog_complete_function,  
upload_start_handler : upload_start_function,  
upload_progress_handler : upload_progress_function,  
upload_error_handler : upload_error_function,  
upload_success_handler : upload_success_function,  
upload_complete_handler : upload_complete_function,  
debug_handler : debug_function,  
};  
swfu = new SWFUpload(settings_object);//实例化一个SWFUpload,传入参数配置对象  
};  
/*定义各种事件监听函数*/  
function swfupload_loaded_function(){}  
function file_dialog_start_function(){}  
//...等等  

我们看到要实现一个SWFUpload上传功能很简单,就是实例化一个SWFUpload对象。但繁琐的地方就在于实例化实要用到的参数配置对象,以及各种事件的发生时机以和提供的参数。所以重点来了。下面几个表格对开发中要用到的东西列举了出来,虽然已经蛮多了,但并不是SWFUpload的全部,我列出来的只是常用的。要查看完整的文档,请到SWFUpload官网上查询。

SWFUpload 配置参数对象中的常用属性及说明

属性 类型 默认值 描述
upload_url String   处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址
preserve_relative_urls Boolean false 如果为false则SWFUpload会把swfupload.swf用到的相对地址转换为绝对地址,以达到更好的兼容性
file_post_name String Filedata 相当于用普通的文件域上传文件时的name属性,服务器端接收页面通过该名称来获取上传的文件
post_params Object(直接量)   一个对象直接量,里面的键/值对会随着每一个文件一起上传,文件上传要附加一些信息时很有用
use_query_string Boolean false 为false时,post_params属性定义的参数会以post方式上传;为true时,则会以get方式上传(即参数会以查询字符串的形式附加到url后面)
file_types String   该属性指定了允许上传的文件类型,当有多个类型时使用分号隔开,比如:*.jpg;*.png ,允许所有类型时请使用 *.*
file_types_description String   指定在文件选取窗口中显示的文件类型描述,起一个提示和说明的作用吧
file_size_limit String   指定要上传的文件的最大体积,可以带单位,合法的单位有:B、KB、MB、GB,如果省略了单位,则默认为KB。该属性为0时,表示不限制文件的大小。
file_upload_limit Number   指定最多能上传多少个文件,当上传成功的文件数量达到了这个最大值后,就不能再上传文件了,也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。
file_queue_limit Number   指定文件上传队列里最多能同时存放多少个文件。当超过了这个数目后只有当队列里有文件上传成功、上传出错或被取消上传后,等同数量的其他文件才可以被添加进来。当file_upload_limit的数值或者剩余的能上传的文件数量小于file_queue_limit时,则取那个更小的值
flash_url String   swfupload.swf文件的绝对或相对地址,相对地址是指相对于当前的页面地址。实例化swfupload后,就不能再改变该属性的值了。
prevent_swf_caching Boolean   为true时会加一个随机数在swfupload.swf地址的后面,以阻止flash影片被缓存,这是为了防止某些版本的IE浏览器在读取缓存的falsh影片时出现的bug
button_placeholder_id String   指定一个dom元素的id,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符
button_placeholder DOMElement   指定一个dom元素,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符。当button_placeholder_id与button_placeholder都存在时,以button_placeholder_id为优先
button_image_url String   指定Flash按钮的背景图片,相对地址或绝对地址都可以。该地址会受到preserve_relative_urls属性的影响,遵从与upload_url一样的规则。
该背景图片必须是一个sprite图片,从上到下包含了Flash按钮的正常、鼠标悬停、按下、禁用这四种状态。因此该图片的高度应该是Flash按钮高度的四倍
button_width Number   指定Flash按钮的宽度
button_height Number   指定Flash按钮的高度,应该为button_image_url所指定的按钮背景图片高度的1/4
button_text String   指定Flash按钮上的文字,也可以是html代码
button_text_style String   Flash按钮上的文字的样式,使用方法见示例
button_text_top_padding Number   指定Flash按钮顶部的内边距,可使用负值
button_text_left_padding Number   指定Flash按钮左边的内边距,可使用负值
button_disabled Boolean false 为true时Flash按钮将变为禁用状态,点击也不会触发任何行为
button_cursor     指定鼠标悬停在Flash按钮上时的光标样式,可用值为SWFUpload.CURSOR里定义的常量
button_window_mode     指定Flash按钮的WMODE属性,可用值为SWFUpload.WINDOW_MODE里定义的常量
file_dialog_start_handler Function   fileDialogStart事件侦听函数
file_queued_handler Function   fileQueued事件侦听函数
file_queue_error_handler Function   fileQueueError事件侦听函数
file_dialog_complete_handler Function   fileDialogComplete事件侦听函数
upload_start_handler Function   uploadStart事件侦听函数
upload_progress_handler Function   uploadProgress事件侦听函数
upload_error_handler Function   uploadError事件侦听函数
upload_success_handler Function   uploadSuccess事件侦听函数
upload_complete_handler Function   uploadComplete事件侦听函数

官方站点:http://www.swfupload.org/ 

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 图片上传编辑插件SWFUpload使用详解