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