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

更新时间：2016年05月19日 14:56:29 作者：arthinking

Uploadify是一款比较有人气的页面上传插件,Uploadify使用简单而且可定制性较高,接下来我们就一起来看下这款基于jQuery的Web上传插件Uploadify使用示例

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文件的位置的后面即可。

您可能感兴趣的文章:

jQuery实现本地预览上传图片功能
这篇文章主要介绍了jQuery实现本地预览上传图片功能，为大家推荐了一款图片上传预览插件，感兴趣的小伙伴们可以参考一下
2016-01-01
jQuery.Form上传文件操作
这篇文章主要介绍了jQuery.Form上传文件操作,首先需要我们先建立test文件夹，具体代码内容大家通过本文学习下吧
2017-02-02
jQuery操作元素追加内容示例
这篇文章主要介绍了jQuery操作元素追加内容,结合完整实例形式分析了jquery页面元素追加相关操作方法,包括append、appendTo、prepend、prependTo等方法使用技巧,需要的朋友可以参考下
2020-01-01
jquery 插件实现瀑布流图片展示实例
本文给大家分享的是使用jQuery的masonry库和infinitescroll库实现的瀑布流美女图片展示的实例，效果非常不错，这里推荐给大家，有需要的小火把可以参考下。
2015-04-04
Jquery 获取相同NAME 或者id删除行操作
这篇文章主要介绍了Jquery 获取相同NAME 或者id删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
jQuery插件ajaxFileUpload异步上传文件
这篇文章主要介绍了jQuery插件ajaxFileUpload异步上传文件的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
jQuery pager.js 插件动态分页功能实例分析
这篇文章主要介绍了jQuery pager.js 插件动态分页功能,结合具体实例形式分析了pager.js 插件的定义及使用插件进行分页操作相关实现技巧,需要的朋友可以参考下
2019-08-08
使用jQuery实现input数值增量和减量的方法
这篇文章主要介绍了使用jQuery实现input数值增量和减量的方法,实例分析了Bootstrap TouchSpin插件的用法,是非常实用的技巧,需要的朋友可以参考下
2015-01-01
jQuery基于ajax操作json数据简单示例
这篇文章主要介绍了jQuery基于ajax操作json数据的方法,结合简单实例形式分析了jQuery的ajax基本使用方法及json数据传输操作相关技巧,需要的朋友可以参考下
2017-01-01
详谈jQuery unbind 删除绑定事件 / 移除标签方法
下面小编就为大家带来一篇详谈jQuery unbind 删除绑定事件 / 移除标签方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03