基于jQuery的Web上传插件Uploadify使用示例


Posted in Javascript onMay 19, 2016

Uploadify是一款功能强大,高度可定制的文件上传插件,实现的效果非常不错,带进度显示。在最简单的方式下,Uploadify使用很少的代码就可以运行起来。
Uploadify官方下载地址:http://www.uploadify.com/download/

测试例子
以下是一个使用的简单例子:
这里我们采用了Uploadify包中自带的php测试脚本作为上传的处理,所以这里安装了wamp作为php的测试环境,在php的网站根目录中,解压上面下载好的Uploadify文件,并创建一个文件上传保存的目录,这里我们在Uploadify的解压目录中创建到了uploads作为文件保存目录。

创建uploadify_test.php文件,添加如下内容:

<html>
<head>
  <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 

  <style type="text/css">
    #custom-demo .uploadifyQueueItem {
     background-color: #FFFFFF;
     border: none;
     border-bottom: 1px solid #E5E5E5;
     font: 11px Verdana, Geneva, sans-serif;
     height: 50px;
     margin-top: 0;
     padding: 10px;
     width: 350px;
    }
    #custom-demo .uploadifyError {
     background-color: #FDE5DD !important;
     border: none !important;
     border-bottom: 1px solid #FBCBBC !important;
    }
    #custom-demo .uploadifyQueueItem .cancel {
     float: right;
    }
    #custom-demo .uploadifyQueue .completed {
     color: #C5C5C5;
    }
    #custom-demo .uploadifyProgress {
     background-color: #E5E5E5;
     margin-top: 10px;
     width: 100%;
    }
    #custom-demo .uploadifyProgressBar {
     background-color: #0099FF;
     height: 3px;
     width: 1px;
    }
    #custom-demo #custom-queue {
     border: 1px solid #E5E5E5;
     height: 213px;
     margin-bottom: 10px;
     width: 370px;
    }        
  </style>  

  <script type="text/javascript">
    $(function() {
    $('#custom_file_upload').uploadify({
       'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
       'script'     : 'uploadify-v2.1.4/uploadify.php',
       'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
       'folder'     : 'uploadify-v2.1.4/uploads',
       'multi'     : true,
       'auto'      : true,
       'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
       'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
       'queueID'    : 'custom-queue',
       'queueSizeLimit' : 3,
       'simUploadLimit' : 3,
       'sizeLimit'  : 1024000,
       'removeCompleted': false,
       'onSelectOnce'  : function(event,data) {
         $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
        },
       'onAllComplete' : function(event,data) {
         $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
        }
      });        
    });
  </script>
</head>
<body>
  <div id="custom-demo" class="demo">

     <h2>Custom Demo</h2>
    <p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
    <div class="demo-box">
      <div id="status-message">Select some files to upload:</div>

      <div id="custom-queue"></div>
      <input id="custom_file_upload" type="file" name="Filedata" />    
    </div>
  </div>
</body>
</html>

Uploadify插件提示$(“#id”).uploadify is not a function错误可能原因
swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API,所以这两个文件需要依赖于jquery-1.4.2.min.js这个文件。
正常情况下需要引入如下几个js文件:

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>

而在项目中已经存在了另外一个jquery的JS文件,导致文件冲突。而另外的一个jQuery文件的引入位置位于上面三个js文件引入位置的后面,此时项目中使用的是原本已经存在的jquery的JS文件,导致在加载jquery.uploadify.v2.1.4.min.js文件时还没有可用的jquery相关函数的定义,才会报这个错误。

解决方法:
去掉其中一个jquery的JS文件,并把swfobject.js和jquery.uploadify.v2.1.4.min.js文件放到引入jquery的JS文件的位置的后面即可。

Javascript 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 #Javascript
当jquery ajax遇上401请求的解决方法
May 19 #Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 #Javascript
前端js文件合并的三种方式推荐
May 19 #Javascript
Node.js+Express配置入门教程
May 19 #Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 #Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
php实现文件上传基本验证
2020/03/04 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python3 元组tuple入门基础
2020/02/09 Python
python isinstance函数用法详解
2020/02/13 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
会议活动邀请函
2014/01/27 职场文书
出纳员岗位职责
2014/03/13 职场文书
护士个人自我鉴定
2014/03/24 职场文书
运动会班级口号
2014/06/09 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript