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