这里介绍的文件上传插件为：
、
例子效果为：
下载地址：
www.uploadify
一、参考文档，调试出一个最简单的例子，文档地址为：www.uploadify/documentation/描述如下：
Before implementing an instance of Uploadify, make sure the minimum requirements are met:
∙jQuery 1.4.x or greater
∙swfObject 2.2 or greater
∙Flash Player 9.0.24 or greater
Download the latest zip package. Extract the following files to a folder named "uploadify" in the root of your website.
∙cancel.png
∙jquery.uploadify.v2.1.4.min.js
∙jquery-1.4.2.min.js
∙swfobject.js
∙uploadify.css
∙uploadify.php
∙uploadify.swf
Save a new page to the root directory of your website and paste the following code into the section:
Head Section
1.<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
2.<script type="text/javascript" src="/uploadify/jquery-1.4.2.min.js"></script>
3.<script type="text/javascript" src="/uploadify/swfobject.js"></script>
4.<script type="text/javascript"excel技巧大全 文库 src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
5.<script type="text/javascript">
6.$(document).ready(function() {
7. $('#file_upload').uploadify({
8. 'uploader' : '/uploadify/uploadify.swf',
9. 'script' : '/uploadify/uploadify.php',
10. 'cancelImg' : '/uploadify/cancel.png',
11. 'folder' : '/uploads',
12. 'auto' : true
jquery下载文件进度条13. });
14.});
15.</script>
*Make sure the folder you are uploading to exists and has write permissions.
In the body section of the page, add the following code:
Body Section
1.<input id="file_upload" name="file_upload" type="file"印度新闻网站 />
When the page is loaded, the file input will automatically be replaced with the Uploadify file uploader.
∙We highly recommend using paths that are relative to the root (AKA begin with a /). If this isn't possible, Uploadify does play nice with links that are relative to the page.
∙Every element that Uploadify is applied to MUST have a unique ID attribute. You can reference elements via class, but each element must have a unique ID.
For a more customized uploader, use the options below.
说明：
网页设计与制作教程第五版答案以上例子为全英文，调试出的例子如下：
16.<link href="<%= path %>/js/uploadify.css" type="text/css" rel="stylesheet" />
17. <script type="text/javascript" src="<%= path %>/js/jquery-1.7.js"></script>
18. <script type="text/javascript" src="<%= path %>/js/swfobject.js"></script>
19. <script type="text/javascript" src="<%= path %>/js/jquery.uploadify.v2.1.4.min.js"></script>
20. <script type="text/javascript">
21. $(document).ready(function() {
22. $('#file_upload').uploadify({
23. 'uploader' : '<%= path %>/js/uploadify.swf',
24. 'script' : '<%= path %>/uploadify',
25. 'cancelImg' : '<%= path %>/cancel.png',
26. 'folder' : '<%= path %>/upload',
27. 'auto' : false,
28. 'fileExt' : '*.rmvb;*.rm;*.png',
29. 'fileDesc' : '.rmvb,.rm,.PNG',//文件描述，选择文件时，出现在文件类型框中
30. "buttonText":"upload file", //按钮上的文字 可以用图片做按钮，如：buttonImg："cancel.png"
31. "height" :20, //选择按钮的高度
32. "multi":true, //是否允许上传多个文件
33. "sizeLimit":1024000000,
34. 'wmode' : 'transparent',//transparent/opaque
35. "onClearQueue":function(event){
36. alert("文件被取消了");
37. },
38. "onComplete":function(){
39. alert("上传完成");mysqldump 导出表结构
40. }
41. });
42. });
43. $(function(){
44. $("#up").click(function(){
45. $("#file_upload").uploadifyUpload();
46. });
47. $("#cancel").click(function(){
48. $("#file_upload").uploadifyClearQueue();
49. });
50. $("#cancelOne").click(function(){
51. $("#file_upload").uploadifyCancel();
52. });
53. });
54. </script>
55. </head>
56.数据库工程师的前景
57. <body>
58. This is my JSP page. <br>
59. <input id="file_upload" name="file_upload" type="file" /><br>
60. <input type="button" value="上传文件" id="up">
61. <input type="button" value="取消上传队列" id="cancel">
62. <input type="button" value="取消一个上传" id="cancelOne">
63. </body>
64.</html>
二、Uploadify部分参数的介绍：
uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，
uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，
点击后弹出打开文件对话框，默认值：uploadify.swf。
script ： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ： 上传文件存放的目录 。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图：
script ： 后台处理程序的相对路径 。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain
folder ： 上传文件存放的目录 。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图：
fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径 。
hideButton ： 设置为true则隐藏浏览按钮的图片 。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度 ，默认值：110。
height ： 设置浏览按钮的高度 ，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flas件会被置为页面的最高层。 默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标
Uploadify还自带了很多参数及有用的方法和回调函数，都在API里，虽然是全英文的，但很容易看懂，这里就不说了。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径 。
hideButton ： 设置为true则隐藏浏览按钮的图片 。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度 ，默认值：110。
height ： 设置浏览按钮的高度 ，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flas件会被置为页面的最高层。 默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标
Uploadify还自带了很多参数及有用的方法和回调函数，都在API里，虽然是全英文的，但很容易看懂，这里就不说了。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论