1. 程式人生 > >Jquery外掛(uploadify外掛實現多檔案上傳)

Jquery外掛(uploadify外掛實現多檔案上傳)

前臺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','*');">&nbsp;&nbsp; ||&nbsp;&nbsp;<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;
        }
    }