文档章节

uploadify 多文件上传例子

again-Y
 again-Y
发布于 2013/06/07 17:33
字数 639
阅读 155
收藏 0
[html]  view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>uploadify 多文件上传例子</title>  
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
  7. <script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>  
  8. <link rel="stylesheet" type="text/css" href="uploadify.css">  
  9. <style type="text/css">  
  10. body {  
  11.     font: 13px Arial, Helvetica, Sans-serif;  
  12. }  
  13. .haha{  
  14.     color:#FFFFFF;  
  15. }  
  16. #queue {  
  17.     background-color: #FFF;  
  18.     border-radius: 3px;  
  19.     box-shadow: 0 1px 3px rgba(0,0,0,0.25);  
  20.     height: 103px;  
  21.     margin-bottom: 10px;  
  22.     overflow: auto;  
  23.     padding: 5px 10px;  
  24.     width: 300px;  
  25. }  
  26. </style>  
  27. </head>  
  28.   
  29.   
  30. <body>  
  31.     <h1>Uploadify Demo</h1>  
  32.     <form>  
  33.         <div id="queue"></div>  
  34.         <input id="file_upload" name="file_upload" type="file" multiple="true">  
  35.     </form>  
  36.       
  37.     <script type="text/javascript">  
  38.         $(function() {  
  39.             $('#file_upload').uploadify({  
  40.                 'debug'         : false,  
  41.                 'auto'          : true,             //是否自动上传,  
  42.                 'buttonClass'   : 'haha',           //按钮辅助class  
  43.                 'buttonText'    : '上传图片',       //按钮文字  
  44.                 'height'        : 30,               //按钮高度  
  45.                 'width'         : 100,              //按钮宽度  
  46.                 'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false  
  47.                 'fileObjName'   : 'files',           //默认 Filedata, $_FILES控件名称  
  48.                 'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB  
  49.                 'fileTypeDesc'  : 'All Files',       //图片选择描述  
  50.                 'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认:'*.*'  
  51.                 'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式  
  52.                 //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated  
  53.                 //'progressData' : 'speed',             //默认percentage 进度显示方式  
  54.                 'queueID'       : 'queue',              //默认队列ID  
  55.                 'queueSizeLimit': 20,                   //一个队列上传文件数限制  
  56.                 'removeCompleted' : true,               //完成时是否清除队列 默认true  
  57.                 'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒  
  58.                 'requeueErrors'   : false,              //队列上传出错,是否继续回滚队列  
  59.                 'successTimeout'  : 5,                  //上传超时  
  60.                 'uploadLimit'     : 99,                 //允许上传的最多张数  
  61.                 'swf'  : 'uploadify.swf', //swfUpload  
  62.                 'uploader': 'uploadify.php', //服务器端脚本  
  63.   
  64.   
  65.                 //修改formData数据  
  66.                 'onUploadStart' : function(file) {  
  67.                     //$("#file_upload").uploadify("settings", "someOtherKey", 2);  
  68.                 },  
  69.                 //删除时触发  
  70.                 'onCancel' : function(file) {  
  71.                     //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');  
  72.                 },  
  73.                 //清除队列  
  74.                 'onClearQueue' : function(queueItemCount) {  
  75.                     //alert(queueItemCount + ' file(s) were removed from the queue');  
  76.                 },  
  77.                 //调用destroy是触发  
  78.                 'onDestroy' : function() {  
  79.                     alert('我被销毁了');  
  80.                 },  
  81.                 //每次初始化一个队列是触发  
  82.                 'onInit' : function(instance){  
  83.                     //alert('The queue ID is ' + instance.settings.queueID);  
  84.                 },  
  85.                 //上传成功  
  86.                 'onUploadSuccess' : function(file, data, response) {  
  87.                     //alert(file.name + ' | ' + response + ':' + data);  
  88.                 },  
  89.                 //上传错误  
  90.                 'onUploadError' : function(file, errorCode, errorMsg, errorString) {  
  91.                     //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);  
  92.                 },  
  93.                 //上传汇总  
  94.                 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  
  95.                     $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');  
  96.                 },  
  97.                 //上传完成  
  98.                 'onUploadComplete' : function(file) {  
  99.                     //alert('The file ' + file.name + ' finished processing.');  
  100.                 },  
  101.                
  102.             });  
  103.         });  
  104.   
  105.   
  106.         //变换按钮  
  107.         function changeBtnText() {  
  108.             $('#file_upload').uploadify('settings','buttonText','继续上传');  
  109.         }  
  110.   
  111.   
  112.         //返回按钮  
  113.         function returnBtnText() {  
  114.             alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));  
  115.         }  
  116.     </script>  
  117.     <h4>操作:</h4>   
  118.     <a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>  |   
  119.     <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>  |   
  120.     <a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a>  |   
  121.     <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>  |   
  122.     <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>  |   
  123.     <a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a>  |   
  124.     <a href="javascript:changeBtnText();">变换按钮</a>  |   
  125.     <h4>大小:</h4>  
  126.     <div id='progress'></div>   
  127. </body>  
  128. </html>  

本文转载自:http://blog.csdn.net/zhaoxuejie/article/details/7892640

again-Y
粉丝 25
博文 131
码字总数 11393
作品 0
昌平
高级程序员
私信 提问
JQuery上传插件Uploadify使用详解及错误处理

上面的代码就简单实现了上传的功能,依靠函数uploadify实现,uploadify函数的参数为json格式,可以对json对象的key值的修改来进行自定义的设置,如multi设置为true或false来控制是否可以进行...

商者
2016/07/15
65
0
Jquery.Uploadify v3.2 使用经验

最近项目要用到多文件上传,HTML里没有这个功能,然后上网找到了Uploadify,一个非常不错的JQuery上传插件。然后上网找到了个uploadify-v2.1.0版的例子,写得很好,可是Uploadify v3.2版本有...

开源中国首席老王
2013/04/27
4.5K
0
jquery的uploadify插件多文件上传配置参数详解

最近做了个多文件上传,需要限制上传文件类型的例子。以前没做过找了一些资料,下次有用。同时也给大家做参考。 uploader: uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的...

again-Y
2013/06/07
3.2K
0
Web开发中的文件上传组件uploadify的使用

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作。在目前Web开发中用的比较多的,可能uploa...

walb呀
2017/12/04
0
0
文件上传~Uploadify上传控件~续(多文件上传)

对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过...

mcy247
2017/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
3
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0
太全了|万字详解Docker架构原理、功能及使用

一、简介 1、了解Docker的前生LXC LXC为Linux Container的简写。可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性。相当于C++中的NameSpa...

Java技术剑
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部