关于jquery文件上传插件 uploadify 3.1的使用
要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要付费,我这里所说的也是前一种。当然现在可能已经不再是3.1版本了,估计是3.2了。不过,差别不会太大!
首先在页面中引入一下文件:
<link rel="stylesheet" type="text/css" href="css/uploadify.css">
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script>
uploadify.swf要和css放在一起,不然会找不到。
jsp页面里:
<input type="file" name="uploadify" id="uploadify" value="浏览"/>
<div id="fileQueue" style="border-top: thin solid gray;"></div>
一下是我自己的页面的代码:
<script type="text/javascript">
$('#rightFrame').load(function(){
var account = $("#account").val();
var id= $("#userId").val();
var currentNode=;
$("#uploadify").uploadify({
//注:这里uploadify为html标签,文件输入框id
swf: 'css/uploadify.swf',
uploader: 'uploadfile.action;',
cancelImg: '/images/uploadify-cancel.png',
buttonText:'选择文件',
fileObjName :'uploadify',
auto: true,
multi:true,
Debug:true,
queueID:'fileQueue',//这里fileQueue 为上传进度条显示在哪个div里
formData:{'account':account,'id':id,'currentNode':$("#rightFrame").contents().find("#test").val()},
removeCompleted:true,
queueSizeLimit:,
fileSizeLimit:'100MB',
height:,
width:,
successTimeout:,
requeueErrors:true,
uploadLimit:,
onUploadSuccess: function (file, data, response) {
if(response)
{
currentNode=data;
}
},
onQueueComplete : function(stats){
window.parent.rightFrame.location.href="fileaction?filenode="+currentNode;
alert("上传完毕");
} });
}); </script>
属性解释:
|
auto |
Boolean |
True |
添加到队列后是否自动上传 |
|
buttonClass |
String |
Empty String |
为Uploadify按钮添加一个类名 |
|
buttonCursor |
String |
“hand” |
鼠标移上浏览按钮显示的鼠标样式 两个值:arrow(箭头)、hand(手形) |
|
buttonImage |
String |
Null |
“浏览”按钮的背景图像的路径。 如果使用默认的样式,你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。) |
|
buttonText |
String |
“SELECT FILES” |
显示在浏览按钮上的文本。注:若没有修改uploadify.swf的字体和uploadify.js文件的编码方式,使用中文将会是乱码 |
|
checkExisting |
String |
||
|
Debug |
Boolean |
False |
设置为True打开SWFUpload调试模式。 |
|
fileObjName |
String |
“Filedata” |
在服务器端接收文件的Form表单键名 |
|
fileSizeLimit |
Number |
0 |
允许上传文件的最大大小。这个值可以是一个数字或字符串。如果它是一个字符串,它接受一个单位(B, KB, MB, or GB)。默认单位为KB。您可以将此值设置为0 ,没有限制。 |
|
fileTypeDesc |
String |
“All Files” |
可选的文件的说明。此字符串将出现在浏览文件对话框的文件类型下拉框中。 |
|
fileTypeExts |
String |
“*.*” |
允许上传的文件扩展名。可以以英文分号隔开的多种文件扩展名。即”*.jpg;*.gif;” 注:如果用户手动键入文件名,将会绕过此安全级别,所以你需要在后台再次对文件名类型进行验证。 |
|
formData |
JSON Object |
Empty Object |
一个额外的JSON对象数据,将与每个文件一起发送至服务器端。如果为动态值,请在onUploadStart()中使用settings()方法更改该JSON值 |
|
Height |
Number |
30 |
浏览按钮所显示的高度 |
|
method |
String |
“post” |
上传文件的方式。 两个值:”get”、”post” |
|
multi |
Boolean |
True |
设置是否为多文件上传,如果设置为False,一次将只能上传一个文件 |
|
overrideEvents |
JSON Array |
Empty Array |
你想绕过的默认脚本的事件名称的数组。你可以告诉在文档页中的每个事件可以被重写的事件。 |
|
preventCaching |
Boolean |
True |
一个防止Flash缓存和冲突的方式,如果设置为True,则Flash的URL将会添加一个随机数。 |
|
progressData |
String |
“percentage” |
设置要在文件上传进度更新队列项目中显示数据的类型。 两个值”percentage”(显示百分比)、” speed”(显示速度) |
|
queueID |
String |
False |
上传文件队列所放的元素ID,必须为ID,且不像jQuery选择器那样,它不需要加#号。如果为false,则队列会自动添加到浏览按钮下方。 |
|
queueSizeLimit |
Number |
999 |
一次可以在队列中文件的最大数目。这并不限制可以上载的文件的数目。若要限制可以上载的文件的数目,请使用 uploadLimit。如果选定要添加到队列的文件的数目超过此限制,则会触发 onSelectError 事件。 |
|
removeCompleted |
Boolean |
True |
当文件上传完成后,是否将此文件从上传队列中清除(默认清除)。 |
|
removeTimeout |
Number |
3 |
从文件上传完成到清除此文件之间的延迟。单位:秒 |
|
requeueErrors |
Boolean |
False |
如果设置为true,期间上传回传失误,重新排队,并多次试图上传的文件。 |
|
successTimeout |
Number |
30 |
上传成功后,将等待服务器的响应时间。在此时间后,若服务器未响应,则默认为成功(因为已经上传完成,只是等待服务器的响应)。单位:秒 |
|
swf |
String |
“uploadify.swf” |
uploadify中的uploadify.swf的路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。 |
|
uploader |
String |
“uploadify.php” |
服务器上传脚本,即接收上传文件后台处理文件路径,可以是相对或绝对路径。相对路径为相对于当前页面路径。 |
|
uploadLimit |
Number |
999 |
允许您上传的文件的最大数量。当达到或超过这个数字, onUploadError事件被触发。 |
|
width |
Number |
120 |
浏览按钮的宽度。 |
需要注意的是:fileObjName属性 它必须和你服务器里文件接收名一致,不然接收不到路径!
关于jquery文件上传插件 uploadify 3.1的使用的更多相关文章
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- JQuery文件上传插件uploadify在MVC中Session丢失的解决方案
<script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...
- jQuery文件上传插件uploadify
官方网站:http://www.uploadify.com/ 参考博客:jQuery Uploadify在ASP.NET MVC3中的使用 参考博客:使用uploadify上传图片时返回“Cannot ...
- 关于jquery文件上传插件 uploadify 3.1的使用
要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要 ...
- jQuery 文件上传插件:uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
随机推荐
- SilkTest天龙八部系列6-用open agent进行测试
SilkTest支持两种测试模式,一种是用classic agent,另一种就是用我们今天要介绍的open agent. open agent可以提供和classic agent差不多的录制回放功能. ...
- 关于Cocos2d-x 3.0正式版 粒子问题在IOS上正常显示,在Android下有问题的解决方式
前几个在Cocos2d-x论坛上,有人提到粒子系统的问题..这里列举一下解决的方法: 或许到时候大家用粒子效果的时候也会发现这个问题,如今把这个问题的解决办法说出来.至于原因我也不知道是引擎的问题还是 ...
- Ibatis的分页机制的缺陷
我们知道,Ibatis为我们提供了可以直接实现分页的方法 queryForList(String statementName, Object parameterObject, int skipResu ...
- win7(64位)php5.5-Apache2.4-环境安装
一.安装配置Apache2.4.7(httpd-2.4.7-win64-VC11.zip ) 1.解压下载的安装包:httpd-2.4.12-x64-vc11-r2.zip将其放到自己的安装目录(我的 ...
- 演练5-3:Contoso大学校园管理系统3
在前面的教程中,我们使用了一个简单的数据模型,包括三个数据实体.在这个教程汇中,我们将添加更多的实体和关系,按照特定的格式和验证规则等自定义数据模型. Contoso大学校园管理系统的数据模型如下. ...
- scrapy新浪天气
一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌面上的程序: LX终端(LXTermin ...
- Silk Icons —— 再来 700 个免费小图标
http://mp.weixin.qq.com/mp/appmsg/show?__biz=MjM5NzM0MjcyMQ==&appmsgid=10000977&itemidx=2&am ...
- Unity Interface Serialization-Expose Interface field In Inspector
Unity has some quirks about their inspector, so as a preface they are listed here: If you add a [Ser ...
- PHP脚本监控程序
#!/bin/sh # Find ip IP=`/sbin/ifconfig eth1 | grep 'inet addr' | awk '{ print substr($2, index($2, & ...
- c语言:union,大小端
union: 不允许只用联合变量名作赋值或其它操作. 也不允许对联合变量作初始化赋值,赋值只能在程序中进行. 小端存储: 以字节为单位,低存低,高存高. 任何数据在内存中都是以二进制(1或着0)顺序存 ...