SWFUpload 使用总结

 

 今天大概的对 SWFUpload 做了一些了解，发现该控件用起来很方便，功能也很强大 呵呵

 

SWFUpload 所用到的基本文件

<link href="./css/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>

 

swfupload.js  控件的核心对象

swfupload.queue.js  处理上传时队列的文件

fileprogress.js  进度条文件

handlers.js 上传事件文件 （该文件根据需要可以进行修改）

 

基本配置

大家可以只关心我注释的配置项

var swfu;

   window.onload = function() {
      var settings = {
         flash_url : "./js/swfupload.swf",  // flash路径 - flash8 
         flash9_url : "./js/swfupload_fp9.swf", // flash路径 - flash9 
         upload_url: "./upload.php",     // 处理上传文件
         use_query_string : false ,
         file_size_limit : "100 MB",     // 文件大小 - 但是没什么用，关键要看服务器设置的大小
         file_types : "*.*",             // 文件类型，如只支持 jpg 则 "*.jpg" 这样设置，此时你只能选择 .jpg 的文件
         file_types_description : "All Files",    
         file_upload_limit : 1,          // 文件上传个数限制，写多少即能上传多少
         file_queue_limit : 0,
         custom_settings : {
            progressTarget : "fsUploadProgress",
            cancelButtonId : "btnCancel"
         },
         file_post_name : 'Filedata' ,   // 他是 file 元素的 name 属性的值。在upload.php 用 $_FILES['Filedata'] 来处理
         debug: true,

         button_image_url: "images/TestImageNoText_65x29.png",   // 按钮图片 可以修改自己喜欢的类型
         button_width: "65",     // 图片的宽度
         button_height: "29",    // 图片的高度
         button_placeholder_id: "spanButtonPlaceHolder",
         button_text: '<span class="theFont">Hello</span>',   // 在按钮中显示的信息 比如可以把他改成 上传
         button_text_style: ".theFont { font-size: 16; }",    // 按钮的字体大小
         button_text_left_padding: 12,    
         button_text_top_padding: 3,
         swfupload_preload_handler : preLoad,
         swfupload_load_failed_handler : loadFailed,
         file_queued_handler : fileQueued,
         file_queue_error_handler : fileQueueError,
         file_dialog_complete_handler : fileDialogComplete,
         upload_start_handler : uploadStart,
         upload_progress_handler : uploadProgress,
         upload_error_handler : uploadError,
         upload_success_handler : uploadSuccess,        // 这里比较重要，他是文件上传接受后激活的函数名 uploadSuccess 下面有说明
         upload_complete_handler : uploadComplete,
         queue_complete_handler : queueComplete	// Queue plugin event
      };

      swfu = new SWFUpload(settings);
   };

 

相对的html代码为

<div id="header">
	<h1 id="logo"><a href="../">SWFUpload</a></h1>
	<div id="version">v2.5.0</div>
</div>

<div id="content">
	<h2>Simple Demo</h2>
	<form id="form1" action="upload.php" method="post" enctype="multipart/form-data">
		<p>This page demonstrates a simple usage of SWFUpload.  It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p>

			<div class="fieldset flash" id="fsUploadProgress">
			<span class="legend">Upload Queue</span>
			</div>
		<div id="divStatus">0 Files Uploaded</div>
			<div>
				<span id="spanButtonPlaceHolder"></span>
				<input id="btnCancel" type="button" value="Cancel All Uploads" οnclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
			</div>

	</form>
</div>

html代码不用做说明，主要是 swfupload 上传之后我们需要做一些小小的修改。

当点击 默认的选择图片按钮 Hello 之后会弹出选择选件的选择框（flash弄出来的），swfupload 默认情况下 一旦选择了文件，他马上会将该附件提交到

upload.php （在上述 upload_url 中设置的）。而 upload.php 会将文件直接上传到我们的服务器。

 

问题是表单数据无法和附件同时上传给 upload.php 而upload.php 通常只对附近进行处理。

 

在这个时候我们可以对 uploadSuccess 方法做处理 打开该方法来看一眼 （他在 handlers.js内）

function uploadSuccess(file, serverData) {
	try {
		var progress = new FileProgress(file, this.customSettings.progressTarget);
		progress.setComplete();
		progress.setStatus("Complete.");
		progress.toggleCancel(false);

	} catch (ex) {
		this.debug(ex);
	}
}

这段代码只对异常做处理，而该方法是在 文件上传成功之后被激活的事件处理函数。其中有2个参数 我们只关心第一个参数 file

file 可以接受在 upload.php 中所输出的字符串（类似 ajax 异步请求之中的  xmlHttp.responseText）

也就是说 我们可以在 upload.php 中 当文件上传完毕之后 将所上传的文件名输出一下。

然后在 uploadSuccess 函数中 将 file 所得到的 文件名 赋值给 表单中的某个隐藏元素中，之后提交该表单的时候可以正确的将所上传的文件名保存到数据库！

 

但是还有一个问题，SWFUpload 一旦选择要上传的文件会立刻上传该文件，导致可能会残留垃圾文件，比如文件点错了。

 

采取的措施

设置 swfupload 上传的文件 存放在一个临时目录中，表单被提交的时候通过获取在临时目录中刚被上传的文件（因为之前我们将上传的文件名通过 uploadSuccess 函数赋值给表单元素的某个隐藏元素里） 然后将临时目录的文件 通过 rename 或者 copy 等方式 将他移动到真正的附件目录中。

 

那么 临时目录中的垃圾文件如何处理呢？ 第一个方案是在访问发布页面的时候第一个做的动作就是删除 保存 swfupload 所上传的临时目录内的所有文件

或者增加一个小功能，即清楚临时目录内残留的文件的模块 定期删除临时目录内的垃圾文件！