基于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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python出现segfault错误解决方法
2016/04/16 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
搞笑征婚广告词
2014/03/17 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年城管工作总结
2014/11/20 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL