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

1、基于jQuery的Web上传插件Uploadify用法示例_ Uploadify是一款比较有人气的页面上传插件,Uploadify用法简洁而且可定制性较高,接下来我们就一起来看下这款基于jQuery的Web上传插件Uploadify用法示例 Uploadify是一款功能强大，高度可定制的文件上传插件，实现的效果特别不错，带进度显示。在最简洁的方式下，Uploadify用法很少的代码就可以运行起来。 Uploadify官方下载地址：l head link href=uploadify-v2.1.4/uploadify.css rel=stylesheet type=text/css / scri

2、pt 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

3、: #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; #custo

4、m-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 #cust

5、om-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

6、: 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).tex

7、t(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 h2Custom Demo/h2 pUploadify is fully customizable. Here is

8、 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-messageSelect some files to upload:/div div id=custom-queue/div input id=custom_file_upload type=file name=Filedata /

9、/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