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;
        }
    }

实现效果图:

时间: 2024-10-25 16:18:13

uploadify插件实现多文件上传的相关文章

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify.com/,进入官网首页(不截图了,其实也没啥看的),可以看到uploadify的标语"Upload files like magic",意思是说使用uploadify上传文件如魔法一般.目前一共分为两个版本,Flash版和HTML5版,不过HTML5版是收费的,如图: 这里我们下载Flas

ajaxFileUpload.js插件支持多文件上传的方法

前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(newEle

uploadify多图片和文件上传网站应用

先要下载压缩包 www.uploadify.com/wp-content/uploads/files/uploadify.zip 1,模板文件引用 <!--引用jquery uploady*}--><script src="http://www.hq08.cn/public/jquery.js" type="text/javascript" charset="utf-8"></script><link r

jquery的uploadify插件实现的批量上传V3.2.1版

你需要如下配置(包括引入文件)HTML: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

详解jQuery uploadify文件上传插件的使用方法

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

jQuery uploadify 文件上传

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo演示 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script t

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 简要教程 ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 安装 可以通过bower或npm来安装ssi-uploader文件上传插件. b

第五节 文件上传

从来都不坦荡,情绪都写在脸上:不开心的时候,不爱说话,笑也勉强.! 输入输出流必须要要会,还有这该死的上传! --胖先生 一. 关于文件上传 关于上传上传操作,Java Web阶段讲解 1.必须使用表单 2.请求必须是POST 3.enctype="multipart/form-data" 注:enctype="multipart/form-data" 注意虽然我们SpringMVC模拟了PUT,那么如果要做上传操作,那么一定使用POST请求 上传的方式,一共两种方