基于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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
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
国内php原创论坛
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
详解json在php中的应用
2018/09/30 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python实现二叉搜索树
2016/02/03 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Django多个app urls配置代码实例
2020/11/26 Python
zooplus意大利:在线宠物商店
2019/08/07 全球购物
主治医师岗位职责
2013/12/10 职场文书
美术指导求职信
2014/03/17 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
创先争优活动承诺书
2014/08/30 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
通知格式
2015/04/27 职场文书
《分数的意义》教学反思
2016/02/20 职场文书