基于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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
页面使用密码保护代码
Apr 10 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
vue中使用props传值的方法
May 08 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
vue实现弹幕功能
Oct 25 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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
论坛头像随机变换代码
2006/10/09 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
使用JS动态显示文本
2017/09/09 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
Python3基础之函数用法
2014/08/13 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python tkinter窗口最大化的实现
2019/07/15 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python math模块的基本使用教程
2021/01/16 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
培训演讲稿范文
2014/01/12 职场文书
有关环保的标语
2014/06/13 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书