图片批量上传插件--swfupload 备忘录

一、上传swfupload文件夹。

swfupload.rar
二、在页面中包括引入下列js文件及代码

<script src="/swfupload/script/swfupload.js"></script>
<script src="/swfupload/script/handlers.js"></script>
<link rel="stylesheet" href="/swfupload/style/swfupload.css"/> 
<script>
var swfu;
window.onload = function () {
 swfu = new SWFUpload({
 upload_url: "/imgupload.php",
 post_params: {"max": 100 },

 // File Upload Settings
 file_size_limit : "2 MB",
 file_types : "*.jpg;*.png;*.gif;*.jpeg",
 file_types_description : "*.jpg;*.png;*.gif;*.jpeg",
 file_upload_limit : 30,

 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_image_url : "/swfupload/style/uploadicon.png",
 button_placeholder_id : "spanButtonPlaceholder",
 button_width: 180,
 button_height: 18,
 button_text : '<span><b>批量上传图片</b></span>',
 button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
 button_text_top_padding: 0,
 button_text_left_padding: 18,
 button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
 button_cursor: SWFUpload.CURSOR.HAND, 
 flash_url : "/swfupload/swfupload/swfupload.swf",
 custom_settings : {
 upload_target : "divFileProgressContainer"
 },
 
 debug: false
 });
};
</script> 

三、在页面相应的位置放入上传图片按钮

<div class="uploadimagespanel">
<p style="padding-top:10px;width: 145px; height:25px; overflow:hidden; line-height:25px;margin-left: 10px;">
<span id="spanButtonPlaceholder"></span>
</p>
<p class="ml10">支持多张上传，最多上传10张，单张照片不超过2M。</p>
<div id="divFileProgressContainer" style="height:auto; padding-top:10px; padding-left:5px;"></div>
<div id="filenames"  style="width:95%;"></div>
<ul class="upload_img_list"></ul>
</div> 

四、php服务器端上传图片代码

imgupload.php
$_pathinfos = pathinfo($_FILES['Filedata']['name']); 
 $date	=	date('Ymd'); 
 $cDir	=	'/upload/photos/'.$date;
 if (! is_dir ( $cDir )) {  mkdir($cDir, 0777);	}
 $_truename  	= 'Photo-t'. substr(time(), -4, 4) . rand(10000,99999) . $_pathinfos["basename"];
 $_newfilename 	= $cDir.'/'.$_truename;
 if (!isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) 
 {
 echo "ERROR:invalid upload";
 exit(0);
 }
 $bool = move_uploaded_file($_FILES["Filedata"]["tmp_name"],  $_newfilename);
 $_time = time(); 
 if($bool)
 {
 $_data = array(
 'name'=>$_pathinfos['basename'],
 'file'=>$cDir.DS.$_truename,
 'size'=>round(filesize($_newfilename)/1024,2),
 'created'=>$_time,
 );
 }
 echo '({"file":"'.$_data['file'].'","name":"'.$_data['name'].'","size":"'.$_data['size'].'","created":"'.date('Y-m-d H:i:s',$_time).'","serializedstr":"'.rawurlencode(serialize($_data)).'"})';

五、执行页面，选择图片上传后。
      可以看到$('.upload_img_list')中已传好的图片，
      及$('#filenames')内的已上传的图片文件名hidden标签。