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

Uploadify是一款功能强大，高度可定制的文件上传插件，实现的效果非常不错，带进度显示。在最简单的方式下，Uploadify使用很少的代码就可以运行起来。 Uploadify官方下载地址：http://www.uploadify.com/download/

测试例子

以下是一个使用的简单例子： 这里我们采用了Uploadify包中自带的PHP测试脚本作为上传的处理，所以这里安装了wamp作为PHP的测试环境，在PHP的网站根目录中，解压上面下载好的Uploadify文件，并创建一个文件上传保存的目录，这里我们在Uploadify的解压目录中创建到了uploads作为文件保存目录。

创建uploadify_test.PHP文件，添加如下内容：

rush:js;">

<style type="text/css">

custom-demo .uploadifyQueueItem {

 background-color: #FFFFFF;
 border: none;
 border-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 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-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 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-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 10px;
 width: 370px;
}        

<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.');
}
});
});

<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-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"&gt; <div id="status-message"&gt;Select some files to upload:</div> <div id="custom-queue"&gt;</div> <input id="custom_file_upload" type="file" name="Filedata" /> </div>

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文件：

rush:js;">

而在项目中已经存在了另外一个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文件的位置的后面即可。