基于jQuery的Web上传插件Uploadify使用示例
Uploadify是一款功能强大，高度可定制的文件上传插件，实现的效果非常不错，带进度显示。在最简单的方式下，Uploadify使用很少的代码就可以运行起来。
Uploadify官方下载地址：http://www.uploadify.com/download/
测试例子
以下是一个使用的简单例子：
这里我们采用了Uploadify包中自带的php测试脚本作为上传的处理，所以这里安装了wamp作为php的测试环境，在php的网站根目录中，解压上面下载好的Uploadify文件，并创建一个文件上传保存的目录，这里我们在Uploadify的解压目录中创建到了uploads作为文件保存目录。
创建uploadify_test.php文件，添加如下内容：
<html>
<head>
<linkhref="uploadify-v2.1.4/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="uploadify-v2.1.4/swfobject.js"></script>
<scripttype="text/javascript"src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
<styletype="text/css">
#custom-demo.uploadifyQueueItem{
background-color:#FFFFFF;
border:none;
border-bottom:1pxsolid#E5E5E5;
font:11pxVerdana,Geneva,sans-serif;
height:50px;
margin-top:0;
padding:10px;
width:350px;
}
#custom-demo.uploadifyError{
background-color:#FDE5DD!important;
border:none!important;
border-bottom:1pxsolid#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:1pxsolid#E5E5E5;
height:213px;
margin-bottom:10px;
width:370px;
}
</style>
<scripttype="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':'ImageFiles(.JPG,.GIF,.PNG)',
'queueID':'custom-queue',
'queueSizeLimit':3,
'simUploadLimit':3,
'sizeLimit':1024000,
'removeCompleted':false,
'onSelectOnce':function(event,data){
$('#status-message').text(data.filesSelected+'fileshavebeenaddedtothequeue.');
},
'onAllComplete':function(event,data){
$('#status-message').text(data.filesUploaded+'filesuploaded,'+data.errors+'errors.');
}
});
});
</script>
</head>
<body>
<divid="custom-demo"class="demo">
<h2>CustomDemo</h2>
<p>Uploadifyisfullycustomizable.Hereisanimplementationwithmultiplefiles,autouploads,limitedfiletypes,limitedqueuesize,andcustomonSelectOnceandonAllCompletefunctions.</p>
<divclass="demo-box">
<divid="status-message">Selectsomefilestoupload:</div>
<divid="custom-queue"></div>
<inputid="custom_file_upload"type="file"name="Filedata"/>
</div>
</div>
</body>
</html>
Uploadify插件提示$(“#id”).uploadifyisnotafunction错误可能原因
swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API，所以这两个文件需要依赖于jquery-1.4.2.min.js这个文件。
正常情况下需要引入如下几个js文件：
<scripttype="text/javascript"src="uploadify-v2.1.4/jquery-1.4.2.min.js"></script> <scripttype="text/javascript"src="uploadify-v2.1.4/swfobject.js"></script> <scripttype="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文件的位置的后面即可。