图片上传编辑插件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 配置参数对象中的常用属性及说明

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

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