jQuery文件上传插件

[b]插件介绍[/b]
html的file控件由一个text框和一个button构成。存在如下几个问题:
1、text框中无法初始化一些说明文字。
2、button上的字是浏览器内置的,修改不了,英文版的浏览器是“Browser…”,中文版的浏览器是“浏览…”,导致无法给按钮上的文字国际化。
3、button的样式也是浏览器内置的,控制不了。
要达到下图的效果,type=”file”不可能。
[img]http://dl.iteye.com/upload/attachment/0076/5272/b71022cf-8f2a-35bc-a066-59218f95a9f3.bmp[/img]
jquery.fakeUpload就是为了解决上述问题而编写的插件。

[b]如何使用[/b]
1、导入jquery.fakeUpload.js(当然它是依赖jquery的)
2、在html的body中加入span或div元素

<span id="span1" name="myfile"></span> //name为后台需要接受的文件参数

3、在jquery的ready方法中初始化fakeUpload组件,初始时参数都是非必须的。

$("#span1").fakeUpload("init",{
tiptext:"只可选*.jpg文件",
btntext:"选择文件...",
btnclass:"btn"
});

4、在页面中通过var path=$(“#span1”).fakeUpload(“getPath”);获取选择文件的全路径

[quote]关于后台如何处理?
1、可以将这个控件就当做浏览器的file控件来对待。
2、文件数据会根据name指定的名字(myfile)传到后台。Action中需要定义一个private File myFile并有相应的set方法。
3、数据需要通过form表单提交过去,form的method="post",enctype="multipart/form-data"。
[/quote]

[b]方法[/b]
[u]init[/u]
初始化控件,调用$(“XX”).fakeUpload(“init”,params);
[i]参数[/i]
Object,属性介绍如下。
•tiptext:String,可选,放在text框中的说明性文字,默认空串。
•width:Number,可选,text框的宽度,默认150。
•btnclass:String,可选,应用在按钮上的Class Name(s),默认“BUTTON75”。
•btntext:String,可选,按钮上的文字,默认“浏览…”。
•checkfn:Function,可选,选择文件后通过这个回调函数验证文件,文件全路径和file组件的name会作为函数参数传给回调函数,默认为

function(filePath,name){
return true;
}

[i]返回值[/i]
jQuery对象。

[u]getPath[/u]
获取选择的文件全路径,调用$(“XX”).fakeUpload(“getPath”);
[i]参数[/i]

[i]返回值[/i]
String,文件全路径。
jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 特征: 1、多文件上传: 允许一次选择多个文件并同时上传。 2、拖放支持: 允许通过从桌面或文件管理器中将文件拖放到浏览器窗口中来上传文件。 3、上载进度条: 显示一个进度条,指示单个文件和所有组合上载的上载进度。 4、可取消的上传: 可以取消单个文件的上传以停止上传进度。 5、可恢复的上传: 可以使用支持Blob API的浏览器恢复中止的上传。 6、批量上传: 大型文件可以使用支持Blob API的浏览器以较小的块上传。 7、客户端图像调整大小: 可以使用支持所需JS API的浏览器在客户端上自动调整图像大小。 8、预览图像,音频和视频: 使用支持所需API的浏览器上载之前,可以显示图像,音频和视频文件的预览。 9、无需浏览器插件(例如Adobe Flash): 该实现基于HTML5和JavaScript等开放标准,并且不需要其他浏览器插件。 10、旧版浏览器的优美回退: 如果支持,则通过XMLHttpRequests上传文件,并使用iframe作为旧版浏览器的回退。 11、HTML文件上传表单后备: 通过使用标准HTML文件上传表单作为小部件元素,可以逐步增强功能。 12、跨站点文件上传: 支持使用跨站点XMLHttpRequest或iframe重定向将文件上传到其他域。 13、多个插件实例: 允许在同一网页上使用多个插件实例。 14、可自定义和可扩展: 提供API来设置各个选项并为各种上传事件定义回调方法。 15、分段和文件内容流的上传: 可以将文件作为标准的“分段/表单数据”或文件内容流(HTTP PUT文件上传)进行上传。 16、与任何服务器端应用程序平台兼容: 支持标准HTML表单文件上传的任何服务器端平台(PHP,Python,Ruby on Rails,Java,Node.js,Go等)均可使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值