文件上传控件自定义样式

文件上传控件<input type="file"/>在不同的浏览器下，显示为不同的样式，并且很难随着不同的设计而进行对应变化，这里将实现一种jquery插件的方法，实现用户自己自定义样式的文件上传控件。

先来看下在不同浏览器下，该控件的显示：

图一：

图二：

由以上两个图我们可以得到几个结论：

1、不同浏览器下，该控件的显示外观有很大不同。

2、在ie下，控件显示文件路径；在其他浏览器下，控件显示文件名。

3、无论怎样改变控件的宽度，控件的”浏览button“（或者文件上传button）的宽度不变（64px）。

还有隐藏的第四个特点：

4、在ie下，只有"浏览button"可点击；而其他浏览器下，文本显示区域也可以点击。

最初的时候，为了达到完全的统一，我的处理思路是：将真的<input type="file" />控件隐藏，用图片制作一个假的控件，当点击图片时，触发真控件的click事件，从而达到外表统一，又完成文件上传的目的。

但是，最终这种方法失败了。经闯闯同学指点，该方法在ie下会触发安全问题。

原因是：这种间接上传文件的方式，被ie认为是不安全的，将阻止文件向服务器传送。所以说，样式处理好了，功能还是没处理好。

最后解决办法：

将真的控件设置为透明的，浮在图片上。

这种情况下，伪控件图片设计就需要考虑之前提到的第3和第4个问题。

最终代码如下：

<body>

</body>

jQuery.fn.extend({fileControl:function(){var argus = arguments[0];return this.each(function(){var paddingLeft = argus.paddingLeft,width = argus.width?argus.width:$(this).width()-(paddingLeft?paddingLeft:0),height = argus.height?argus.height:$(this).height(),top = argus.top?argus.top:($(this).height()+parseInt(($(this).outerHeight() - $(this).height())/2)),left = argus.left?argus.left:($(this).width()+parseInt(($(this).outerWidth() - $(this).width())/2)),  lineHeight = argus.lineHeight?argus.lineHeight:height,　　　　　　　　　　　　　　　　　　　　　//设置伪控件样式　　　　　　　　　　　　　　　　　　　　　style = "position:relative; z-index:-1; background-position:top left; background-repeat:no-repeat;left:0px;top:-"+height+"px;";    style += argus.image?("background-image:url("+argus.image+");"):"";       style += "width:"+width+"px;";style += height?("height:"+height+"px;"):"";style += paddingLeft?("padding-left:"+paddingLeft+"px;"):"";style += lineHeight?("line-height:"+lineHeight+"px;"):"";$(this).wrap("<div></div>").after("<div id='fadeFile' ></div>").css({"width":"64px","opacity":"0"}).next().attr("style",style);$(this).change(function(){showFile($(this),$(this).next());}); function showFile(telem,felem){var value = $(telem).val(),pos = -1;if((pos = value.lastIndexOf("\\")) != -1){value = value.slice(pos+1);}$(felem).text(value);}});}});

调用方法：

$(fileElem).fileControl(obj);

其中的fileElem为文件上传控件对象，obj为属性对象，包括以下属性：

image:伪控件图片路径。必须项。

width:图片宽。必须项。

height:图片高。必须项。

paddingLeft:控制上传文件名的显示横向位置。可选；默认值为0。

top:伪控件距离原控件起点的位置的上边距。可选；正值；默认为真控件的(高+(外高-高)/2)

left:伪控件距离原控件起点的位置的左边距。可选；正值；默认为真控件的(宽+(外宽-宽)/2)

lineHeight:文件名显示的纵向位置。可选；默认值为真控件的高。

例子：

$("#fileControl").fileControl({"image":"file.png","width":"505","height":"27","paddingLeft":"70"});

实现结果：

代码：

控件：

该控件优点：

　　1、比较灵活：用户可根据自己的设计，调整控件的位置、文字显示位置等属性。

　　2、文件名显示：可以将路径和文件名在ie浏览器下的不统一，控制成显示为统一的文件名。

　　3、遵循web开发的“平稳退化”原则：伪控件的dom元素及样式均由js动态生成，在不支持js的情况下，人能正常的表达页面，并完成文件上传功能。

转载于:https://www.cnblogs.com/hity/p/input_file.html

文件上传控件自定义样式相关推荐

jquery文件上传控件 Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
使用jquery文件上传控件Uploadify来异步上传图片
1.项目中需要图片的异步上传,度娘之后发现有一个插件可以完成这个需求,即是:Uploadify 下面是这个异步上传的插件的一个简单介绍: 基于jquery的文件上传控件,支持ajax无刷新上传,多个文 ...
Bootstrap4文件上传控件美化
Bootstrap拯救了不太会html+css的我,同时Bootstrap也太方便了,但是,也有一点受限默认一些功能看不到了,今天用到文件上传控件,HTML默认的和Bootstrap4的自定义的都不太 ...
html标签手册 360doc,基于AJAX的文件上传控件NetAdvantage for jQuery
NetAdvantage for jQuery 是一款全新的轻量级.高性能的jQuery控件,包含了在线的Video播放控件,基于AJAX的文件上传控件,快速且强大的表格控件,以及创建和编辑Word. ...
JQuery文件上传控件Uploadify文档
Uploadify是一个基于JQuery的文件上传控件,支持ajax无刷新上传,比较好用,现在用着一个不爽的地方是--每个版本的属性名和事件名.方法名都有一些不一样,这在遇到问题,查资料的时候会比较麻 ...
bootstrapinput传参数_***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在fileinput ...
python bootstrap-fileinput示例_文件上传控件bootstrap-fileinput的使用
一.准备 1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用filei ...
BootStrap文件上传控件
一.准备 1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用filei ...
angularjs java 文件上传_学习使用AngularJS文件上传控件
前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jque ...

文件上传控件自定义样式

文件上传控件自定义样式相关推荐

最新文章

热门文章

文件上传控件 自定义样式

文件上传控件 自定义样式相关推荐

最新文章

热门文章

文件上传控件自定义样式

文件上传控件自定义样式相关推荐