前台HTML代碼:
<div class="control-group" id="title-control-group"> <label class="control-label"><?=_('關於圖片(*)')?></label> <div class="controls"> <div><input id="about_file_upload" name="about_file_upload" type="file" /> <input type="button" value="確定上傳" onclick="javascript:$('#about_file_upload').uploadify('upload','*');"> || <a href="javascript:ClearUpload('about');"><?=_('清除上傳列表')?></a></div> <p style="color:red;"><?php $msg=_('請按以下語言版本上傳:'); for($n=0;$n<count($lang);$n++) { $t.=$lang[$n]['lang'].','; } $t=substr($t,0,strlen($t)-1); echo $msg.$t; ?></p> <span id="about_FileNames"></span> <input type="hidden" name="about_images" id="about_images"/> <input type="hidden" name="temp_about_images" id="temp_about_images"/></div></div></div> <script src="/theme/<?=T_D?>/assets/uploadify/jquery.uploadify.min.js" type="text/javascript" ></script> <link href="/theme/<?=T_D?>/assets/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
前台JS:
$("#about_file_upload").uploadify({
'swf': '/theme/<?=T_D?>/assets/uploadify/uploadify.swf',//所需要的flash文件
'cancelImg': 'cancel.png',//單個取消上傳的圖片
'auto' : false,
'uploader': '/management/common/uploadify',//實現上傳的程序
'folder': 'uploads/pic',//服務端的上傳目錄
'multi': true,//是否多文件上傳的
'displayData': 'speed',//進度條的顯示方式
'fileTypeExts': '*.jpg;*.jpeg;*.gif;*.png',//可上傳的文件類型
'fileSizeLimit': '2MB',//限制文件大小
'simUploadLimit' :3, //並發上傳數據
'queueSizeLimit' :<?php echo count($lang);?>, //可上傳的文件個數
'buttonText' :'<?=_('文件上傳')?>',//通過文字替換鈕扣上的文字
'buttonImg': 'css/images/browseBtn.png',//替換上傳鈕扣
'width': 80,//buttonImg的大小
'height': 24,//
'formData':{'source':'doctor'},
onSWFReady:function(){
$("#doctors_FileNames").html('');
$("#temp_doctor_images").val('');
},
onUploadSuccess: function (file, data, response) {
var msg=$("#about_FileNames").html();
var image_data=$("#temp_about_images").val();
msg+=data+","+"<br/>";
image_data+=data+",";
$("#about_FileNames").html(msg);
$("#temp_about_images").val(image_data);
},
onQueueComplete:function()
{
var msg=$("#about_FileNames").html();
var image_data=$("#temp_about_images").val();
$("#about_images").val(image_data);
}
});
});
//清除上傳
function ClearUpload(source)
{
if(source=='doctor')
{
$('#doctor_file_upload').uploadify('cancel','*');
$("#doctors_FileNames").html('');
$("#doctor_images").val('');
$("#temp_doctor_images").val('');
}
else if(source=='about')
{
$('#about_file_upload').uploadify('cancel','*');
$("#about_FileNames").html('');
$("#about_images").val('');
$("#temp_about_images").val('');
}
}
后端PHP代碼:
//文件上傳 function uploadify() { $sub=$this->input->post(); if(!empty($_FILES)) { $source=$sub['source']; $year=date("Y",time()); $month=date("n",time()); $day=date("j",time()); $ext=end(explode('.', $_FILES["Filedata"]["name"])); $_dir = "./uploads/$source/$year/$month/$day/"; if (!is_dir($his_dir)) { $this->commfunctions->mkpath($_dir); } move_uploaded_file($_FILES["Filedata"]["tmp_name"],$_dir.md5(time()).'_'.md5($_FILES["Filedata"]["name"]).'.'.$ext); echo "/uploads/$source/$year/$month/$day/".md5(time()).'_'.md5($_FILES["Filedata"]["name"]).'.'.$ext; } }
實現效果圖:

