【jQuery】uploadify,实际开发案例【选择完文件点击上传才上传】

时间:2022-09-14 14:20:55

----------------------------------------------------------------------------------
js部分:
----------------------------------------------------------------------------------
<script type="text/javascript">
    var $upfile_name="【<? echo $_username;?>"+Math.floor(Math.random()*9999999)+Math.floor(Math.random()*99999999)+'】-';  //设置随机文件前缀。
    $k(function() 
    { 
        $k("#uploadify").uploadify({ 
        'uploader': '../file/uploads/uploads.swf', 
        'cancelImg': '../file/uploads/cancel.png', 
        'folder': '../file/uploads/UploadFile', 
        'queueID': 'fileQueue', 
        'buttonImg':'../file/uploads/images/upload.jpg', 
        'width':'95',
        'height':'24',
        'auto': false, //非自动上传模式。
        'fileDesc':'请选择doc,rar,pdf,rar,txt文件!',
        'fileExt':'*.doc;*.pdf;*.rar;*.txt',
        'sizeLimit':'10240000000000000',
        'script': '../file/uploads/uploadify.php',
        'fileDataName':'Filelist',
        //'checkScript': '../file/uploads/check.php', 
        'onInit':function()//脚本加载时触发。
        {
            $k("#shangchuan").attr("disabled",true);
            $k("#unshangchuan").attr("disabled",true);
        },    
        'onSelect': function(e, queueId, fileObj)
        {
            $k("#uploadify").uploadifySettings('scriptData',{'name':$upfile_name}); //不重复文件名的关键,在上传时给文件加上自定义的随机前缀。
            //var $value_zh=$k("#some").val();
            //$k("#Success").val("");
            //$k("#some").attr("value",$upfile_name+fileObj.name+"|"+$value_zh);
            $k("#shangchuan").attr("disabled",false).attr("enabled",true);
            $k("#unshangchuan").attr("disabled",false).attr("enabled",true);
        },
        'onCancel': function(e, queueId, fileObj)    //点击上传文件后面的删除图片时触发
        {
            var $value_zh=$k("#some").val();
            $value_zh=$value_zh.replace($upfile_name+fileObj.name+"|","");
            //alert(fileObj.name);
            //alert(value_zh);
            $k("#some").val($value_zh);
            if($k(".uploadifyQueueItem").length==1) 
            {
                $k("#shangchuan").attr("disabled",true).attr("enabled",false);
                $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
            }
        },
        'onComplete':function (event, queueID, fileObj, response, data)    //上传一次
        {
            //var $content_fz=$k("<li id='file_list' style='height:30px;'>文件名:<input name='Success[]' type='text' id='Success' value='"+fileObj.name+"上传成功' size='20' readonly='true'/>&nbsp;&nbsp;&nbsp;文件简介:<input name='Introduction' type='text' id='Introduction' size='20'/>&nbsp;&nbsp;&nbsp;<a id='del'>[删除]</a></li>");
            var $value_zh=$k("#some").val();
            $k("#some").attr("value",$upfile_name+fileObj.name+"|"+$value_zh);
            var $content_fz=$k("<li id='file_list' style='height:30px;'>文件名:<input name='Success[]' type='text' id='Success' value='"+fileObj.name+"' size='20' readonly='true'/>&nbsp;<a id='del'>[删除]</a></li>");
            $k("#file_content").append($content_fz);
            
            //$k("#Success").val("").val(""+fileObj.name+"上传成功");
        },
        'onError':function(event, queueID, fileObj)    //错误提示
        {
            $k("#Success").val("").val(""+fileObj.name+"上传失败");
        }, 
        'onAllComplete':function(event)    //全部上传完成
        {
            //$k("#Success").hide();
            //$k("#some").val("");
            //$k("#Success").val("");
            $k("#shangchuan").attr("disabled",true).attr("enabled",false);
            $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
            
            $k("a").click(function(){
                $k(this).parent("li:eq(0)").remove();
                var $file_name_1=$k(this).parent("li").children("input").val();
                var $file_name_2=$k("#some").val();
                $file_name_2=$file_name_2.replace($upfile_name+$file_name_1+"|","")
                $k("#some").val($file_name_2);
            })
        },
        'multi': true 
        });
        
        $k("#shangchuan").click(function(){     //上传按钮
            $k('#uploadify').uploadifyUpload();
            $k("#shangchuan").attr("disabled",true).attr("enabled",false);
            $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
        })
        
        $k("#unshangchuan").click(function(){    //取消全部按钮
            $k('#uploadify').uploadifyClearQueue();
            $k("#shangchuan").attr("disabled",true).attr("enabled",false);
            $k("#unshangchuan").attr("disabled",true).attr("enabled",false);
        })
    }); 
</script>
----------------------------------------------------------------------------------
html代码:
----------------------------------------------------------------------------------
<tr>
  <td class="tl"><span class="f_red">*</span> 附件</td>
  <td class="tr">
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" /><br/><br/>
选择的上传文件:<input name="some" type="text" id="some" size="60" readonly="true"/>
<br/><br/>
<ul id="file_content"></ul>
<p>
<input type="button" name="Submit" value="上 传" id="shangchuan"/>&nbsp;&nbsp;&nbsp;<input type="button" name="Submit2" value="取消上传" id="unshangchuan"/></td>
</tr>
----------------------------------------------------------------------------------
php代码:
----------------------------------------------------------------------------------
$_POST['name']; //接的是下面蓝色字,下面蓝色字就是变量名,这里name可以任意修改,修改成什么我们到时候接什么就OK;下面的$upfile_name是对应的值。
接值:$k("#uploadify").uploadifySettings('scriptData',{'name':$upfile_name});

----------------------------------------------------------------------------------
整个效果图如下:
【jQuery】uploadify,实际开发案例【选择完文件点击上传才上传】

【jQuery】uploadify,实际开发案例【选择完文件点击上传才上传】的更多相关文章

  1. uploadify,实际开发案例【选择完文件点击上传才上传】

    <script type="text/javascript"> )+Math.floor(Math.random()*)+']-'; //设置随机文件前缀. $k(fu ...

  2. MVC 4 结合jquery&period;uploadify 上传实例

    前言:由于今天公司源代码服务瘫痪,没法编写代码,利用这个有限的时间,做了一个小小的 基于MVC的图片上传demo,貌似近些年来MVC十分火爆,相关的demo也数不胜数,小弟就在这里打着MVC的旗子,狐 ...

  3. jquery&period;uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  4. jquery&period;uploadify上传文件配置详解&lpar;asp&period;net mvc&rpar;

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  5. 使用Jquery&plus;EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

  6. 使用Jquery&plus;EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享    在上两篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> ...

  7. 使用Jquery&plus;EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享   在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享 ...

  8. 【推荐】使用Jquery&plus;EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  9. 使用Jquery&plus;EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

随机推荐

  1. Autodesk Cloud Accelerator Program 开始报名

    如果你没有注意到这个消息,那你就会错过一个前往旧金山和硅谷工程师一起工作数周的机会. 摘要一下: 时间: 1月10前提交你的提案,3月飞往旧金山 地点: 旧金山. 包住宿哦~ 不过,既然要去美国,既然 ...

  2. iOS - &lpar;简单平移动画&sol;弹出View的使用&rpar;

    在iOS 开发中,使用平移动画的频率越来越高,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用.在APP开发中实现动画效果有很多种方式,但我目前是使用较多的是平移动画,顺便也在此做一些小小的总结,大 ...

  3. 【jmeter】元件的作用域与执行顺序

    1.元件的作用域 JMeter*有8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器是典型的不与其它元件发生交互作用的元件,逻辑控制器只对其子节点的取样器有效,而其它元件(conf ...

  4. Linux&lowbar;内存查询

    查询磁盘使用情况: [root@css-management ~]# df -hl 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Moun ...

  5. BOM基础(三)

    在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...

  6. 2017年Web前端开发工程师薪资越来越高?

    放眼全球,不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛.供不应求的香饽饽.所以在供不应求的前端招聘市场上,优秀的前端工程师才是有话语权的那一方. 前端开发是做什么的? 前端是互联网时代软件 ...

  7. Spring Boot之WebSocket

    一.项目说明 1.项目地址:https://github.com/hqzmss/test01-springboot-websocket.git 2.IDE:IntelliJ IDEA 2018.1.1 ...

  8. Linux下使用Quagga&lpar;Zebra&rpar;搭建路由器记录(转)

    写在前面 从22号中午开始琢磨zebra/quagga的用法,一直到晚上11点多都没有什么头绪.各种Google,百度,几近崩溃.由于网上关于zebra/quagga的配置方法都是在真实的若干台电脑上 ...

  9. Java虚拟机学习 - 对象访问 (2)

    对象访问会涉及到Java栈.Java堆.方法区这三个内存区域. 如下面这句代码: Object objectRef = new Object(); 假设这句代码出现在方法体中,"Object ...

  10. 【ArcGIS for JavaScript api】Clusterlayer聚簇类

    1.作用: 聚簇类是用于前端显示优化,使POI点要素显示更为美观.大量的Marker距离太近会引起压盖而对浏览或者操作产生不便,因此,一般在超过1K点的时候,用此类.. 2.使用方式: 1: // c ...