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;
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释。绝对好用,支持单文件、多文件上传,支持大文件上传,已经过多方面测试,保证好用。 以下附上Uploadify部分常用的参数介绍,要看全部的就去看其API文件了,一般在下载的包里都有。  uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf。   script : 后台处理程序的相对路径 。默认值:uploadify.php   checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径   fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata   method : 提交方式Post 或Get 默认为Post   scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain   folder : 上传文件存放的目录 。   queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。   queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。   multi : 设置为true时可以上传多个文件。   auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。   fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:   fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。   sizeLimit : 上传文件的大小限制 。   simUploadLimit : 允许同时上传的个数 默认值:1 。   buttonText : 浏览按钮的文本,默认值:BROWSE 。   buttonImg : 浏览按钮的图片的路径 。   hideButton : 设置为true则隐藏浏览按钮的图片 。   rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。   width : 设置浏览按钮的宽度 ,默认值:110。   height : 设置浏览按钮的高度 ,默认值:30。   wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。   cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标 Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值