读书人

jquery文件下传插件使用指南(fakeUpl

发布时间: 2012-11-17 11:14:15 作者: rapoo

jquery文件上传插件使用指南(fakeUpload)
插件介绍
html的<input type=”file”>由一个text框和一个button构成。存在如下几个问题:
1、text框中无法初始化一些说明文字。
2、button上的字是浏览器内置的,修改不了,英文版的浏览器是“Browser…”,中文版的浏览器是“浏览…”,导致无法给按钮上的文字国际化。
3、button的样式也是浏览器内置的,控制不了。
要达到下图的效果,type=”file”不可能。

jquery文件下传插件使用指南(fakeUpload)

jquery.fakeUpload就是为了解决上述问题而编写的插件。


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

/** * 模拟<input type="file" /> * Author:dengl */(function($){var DEFAULT_OPTS={"tipText":"",//提示信息"width":150,//text文本框宽度"btnWidth":75,"btnClass":"BUTTON75","btnText":"浏览...","fileCheckFn":function(fileName){//文件检查return true;}};/** * 初始化 * @param $t * @param opts * @returns */function init($t,opts){var _fakeUpload=$t.data('fakeUpload');if(!_fakeUpload){$t.css({"position":"relative","display":"inline-block"});$t.append('<label>'+'<input type="text" style="width:'+opts.width+'px;color: #BBBBBB;" readonly="readonly" value="'+opts.tipText+'"/> '+'<input type="button" style="width:"'+(opts.btnWidth||75)+'px;" class="'+(opts.btnClass||'BUTTON75')+'" value="'+opts.btnText+'" />'+'</label>'+'<input type="file" name="'+($t.attr("name")||"")+'" style="position:absolute;right:0px;bottom:5px;z-index:2;opacity:0;filter:alpha(opacity:0);" />');$t.removeAttr("name");_bindAction($t,opts);// 为html标签绑定一些数据$t.data('fakeUpload',{opts:opts});}}/** * 获取文件路径 */function getPath($t){var _fakeUpload=$t.data('fakeUpload');if(_fakeUpload){var v=$t.find("input[type=text]").val();return v==_fakeUpload.opts.tipText?"":v;}return "";}/** * 绑定事件 * @param $t * @param opts * @returns */function _bindAction($t,opts){var $file=$t.find("input[type=file]");var $txt=$t.find("input[type=text]");$file.unbind(".fakeUpload").bind("change.fakeUpload",function(){if(opts.fileCheckFn(this.value)){if(!this.value){$txt.css({"color":"#BBBBBB"});$txt.val(opts.tipText);}else{$txt.css({"color":""});$txt.val(this.value);}}});}$.fn.fakeUpload=function(m,opts){opts=opts||{};switch(m){case 'init':return this.each(function(){var _opts=$.extend({},DEFAULT_OPTS,opts);init($(this),_opts);});case 'getPath':return getPath(this);}};})(jQuery);



读书人网 >Web前端

热点推荐