与传统html的上传控件相比，swfupload上传控件从用户感受方面的优势是很明显的。
swfupload控件采用as代码与javascript代码相结合的方式，提供给用户更好的体验。除此之外，swfupload的很强的可扩展性，也为我们提供了很大的定制自己个性站点的空间。
本文主要不是讲述swfupload的使用方法。在我们上传成功了多个图片并且已经在我们制定的层中显示出来的时候，当然我们希望用户可以删除它们。此时，问题出现了。
该控件中，我们需要指定一个允许用户上传图片的个数，如果删除一个的话，我们必须同步更新已经上传成功的数量。否则即使用户已经删除了图片，控件也是不允许用户继续上传的。
废话少说，先上代码：
<script type="text/javascript">
??var swfu;
??window.onload = function () {
???swfu = new SWFUpload({
????// Backend Settings
????upload_url: "upload.aspx",
??????????????? post_params : {
??????????????????? "ASPSESSID" : "<%=Session.SessionID %>"
??????????????? },
????// File Upload Settings
????file_size_limit : "2 KB",
????file_types : "*.jpg;*.png;*.gif;*.bmp",
????file_types_description : "JPG Images",
????file_upload_limit : "3",???
????file_queue_error_handler : fileQueueError,
????file_dialog_complete_handler : fileDialogComplete,
????upload_progress_handler : uploadProgress,
????upload_error_handler : uploadError,
????upload_success_handler : uploadSuccess,
????upload_complete_handler : uploadComplete,
????// Button settings
????button_image_url : "images/XPButtonNoText_160x22.png",
????button_placeholder_id : "spanButtonPlaceholder",
????button_width: 160,
????button_height: 22,
????button_text : '<div style="border:1px solid #c00;width:80px;height:20px;font">选择文件</div>',
????button_text_style : '.button { font-family: Helvetica,Arial,sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
????button_text_top_padding: 1,
????button_text_left_padding: 5,
????// Flash Settings
????flash_url : "swfupload/swfupload.swf",?// Relative to this file
????custom_settings : {
?????upload_target : "divFileProgressContainer"
????},
????// Debug Settings
????debug: false
???});
??}
?</script>
首先我们实例化了一个swfupload对象，并且指定了允许用户上传的图片个数3：file_upload_limit : "3",???（如果指定是0，则不限制）。同时我们指定了图片上传成功后要调用的js方法是uploadSuccess函数。如下代码：
upload_success_handler : uploadSuccess,
在uploadSuccess（）中，我们需要处理如下事情：
1、获取服务返回的数据。
2、把数据转换为图片显示给用户。
3、给每个图片添加删除事件，响应用户操作。
4、用户删除图片后，同步更新已经上传成功的个数。
主要问题在第四步，已经上传成功的文件个数该变量是作为一个私有方法在类内部调用的，如果我们需要更新，必须要获取当前实例的统计对象，更改统计对象后，再把新的对象赋值给当前实例，最后得到同步。直接上代码：
function uploadSuccess(file,serverData) {
??? try {
??????? //??????? alert(userSettings["file_upload_limit"]);
??????? total_uploaded++;
??????? alert("uploadSuccess=>总共成功上传个数：" + total_uploaded);
??????? alert("uploadSuccess=>文件名：" + file.name);
?????
??????? addImage(serverData);//该方法中设置删除图片操作
???? var progress = new FileProgress(file,this.customSettings.upload_target);
??progress.setStatus("上传成功.");
??progress.toggleCancel(false);
?} catch (ex) {
??this.debug(ex);
?}
}
function addImage(src) {
??? var newImg = document.createElement("img");
??? //newImg.style.margin = "5px";
??? document.getElementById("thumbnails").appendChild(newImg);
??? if (newImg.filters) {
??????? try {
??????????? newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
??????? } catch (e) {
??????????? // If it is not set initially,the browser will throw an error.? This will set it if it is not set yet.
??????????? newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
??????? }
??? } else {
??????? newImg.style.opacity = 0;
??? }
??? newImg.onload = function () {
??????? fadeIn(newImg,0);
??? };
??? //alert(src);
??? newImg.src = src;
?? // newImg.className = "img_wrap";
??? $(newImg).wrap("<div class='img_wrap'></div>");
??? $(".img_wrap").append("<div class='img_del'>删除</div>");
??? $(".img_del").hide();
??? $(".img_wrap").mouSEOver(function () {
??????? $(this).css("border","1px solid #c00");
??????? $(this).find(".img_del").show();
??? }).mouSEOut(function () {
??????? $(this).css("border","1px solid #ccc");
??????? $(this).find(".img_del").hide();
??? });
??? $(".img_del").click(function () {
??????? var cur_wrap = $(this).parent();
??????? var cur_img = cur_wrap.find("img");
??????? $.ajax({
??????????? url: "handler/ImgHandler.ashx",
??????????? data: { "ImgPath": cur_img.attr("src") },
??????????? success: function (data) {
??????????????? if (data != null) {
??????????????????? if (data == "1") {
??????????????????????? cur_wrap.hide();
??????????????????????? total_uploaded--;
??????????????????????? var stats = swfu.getStats();
??????????????????????? stats.successful_uploads--;
??????????????????????? swfu.setStats(stats);
??????????????????? }
??????????????????? else {
??????????????????????? alert("删除失败！");
??????????????????? }
??????????????? }
??????????????? else {
??????????????????? alert("删除失败！");
??????????????? }
??????????? }
??????? });
??? });
}
上面的关键代码是：
var stats = swfu.getStats();
??????????????????????? stats.successful_uploads--;
??????????????????????? swfu.setStats(stats);
说明：首先我们利用当前实例获取当前的统计对象stats。更新统计对象的属性successful_uploads（该属性决定用户已经上传成功的文件个数）。之后把新统计对象赋给当前实例。
到此结束。
后话：除了这种方法之外，我们同样可以更改flash内部的as代码做出更独特的定制。相比之下，上述方法更加便捷。
swfupload控件的可定制化已经非常强大，兼容性也非常好（兼容ie7+，火狐，谷歌）。不过如果版本是2.2的话，我们需要对源码做一些修改，以解决ie9+的bug（上传按钮不显示）。代码如下：
SWFUpload.prototype.getFlashHTML = function (flashVersion) {
?// Flash Satay object syntax: http://www.alistapart.com/articles/flashsatay
//?return ['<object id="',this.movieName,'" type="application/x-shockwave-flash" data="',(this.support.imageResize ? this.settings.flash_url : this.settings.flash9_url),'" width="',this.settings.button_width,'" height="',this.settings.button_height,'" class="swfupload">',
??? var classid = navigator.userAgent.search(/MSIE/) > -1 ? ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ' : ' ';?
??? return ['<object'+classid+'id="',?
????'<param name="wmode" value="',this.settings.button_window_mode,'" />',
????'<param name="movie" value="',
????'<param name="quality" value="high" />',
????'<param name="allowScriptAccess" value="always" />',
????'<param name="flashvars" value="' + this.getFlashVars() + '" />',
????'</object>'].join("");
};
把上面屏蔽的代码换成现在的代码即可。
上述只代表本人开发中的一些个人经验，如有谬误，还请大家指正。
