基于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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
js中有关IE版本检测
Jan 04 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
JS数组的赋值介绍
Mar 10 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
js仿京东放大镜效果
Aug 09 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP7.0版本备注
2015/07/23 PHP
教你php如何实现验证码
2016/01/20 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
javascript每日必学之循环
2016/02/19 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
从零学Python之hello world
2014/05/21 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
大学生入党思想汇报
2014/01/01 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
班队活动设计方案
2014/01/30 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
负责人任命书范本
2014/06/04 职场文书
工作所在部门证明
2014/09/21 职场文书
异地年检委托书范本
2014/09/24 职场文书
九九重阳节标语
2014/10/07 职场文书
优秀党员推荐材料
2014/12/18 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers