zoukankan      html  css  js  c++  java
  • 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;
            }
        }

    实现效果图:

    image

  • 相关阅读:
    日常巡检
    mysql 主从
    tomcat +apache 动静分离
    ELK安装
    LVS-NAT模式
    shell 三剑客
    shell $传参
    zabbix安装
    lvs-DR 负载均衡
    解决ubuntu中pycharm的图标没有问题
  • 原文地址:https://www.cnblogs.com/zhaobijin/p/5801037.html
Copyright © 2011-2022 走看看