网站建设资讯

NEWS

网站建设资讯

jquery-filestyle上传按钮样式使用

改变文件上传按钮样式,使用button代替file input,在ie10及一下版本会报错的解决方法,就是把file input设置成透明,覆盖在button上面,参考文章:https://www.cnblogs.com/xuehaoyue/p/6978374.html

创新互联专注于松岭企业网站建设,响应式网站建设,商城建设。松岭网站建设公司,为松岭等地区提供建站服务。全流程按需定制,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

下面的方法是使用jquery-filestyle控件样式,需要依赖jquery和bootstrap,网上下载jquery-filestyle之后,里面有open-iconic-bootstrap.css和bootstrap-filestyle.min.js,这两个文件是主要的,可能还会看到jquery-3.2.1.slim.min.js这个文件,它其实就是jquery.min.js的精简版,如果有jquery.min.js就不用引用jquery-3.2.1.slim.min.js这个文件了

其中open-iconic-bootstrap.css这个文件中使用相对路径引入了上一级目录下fonts文件夹下的文件,是一些图标,所以这两个文件夹jquery-filestyle上传按钮样式使用
的相对位置不能改变,不然需要修改css里源码路径,这个就麻烦了

这些必要的文件引入之后,就可以改file input 的样式了
首先需要一个file input标签:
<input type="file">
只写一个type属性就行,其它的不用写,有的加上了一个class="filestyle",那只是用标签属性渲染input的方式,我现在说的方式是用js方式渲染,下面就是了:

$('input[type=file]').filestyle({
                //badge: false,//是否显示选择文件数量角标
                //input : false,//是否显示input文件名,filestyle自带的input
                btnClass : 'btn-primary',//选择文件按钮的样式
                text: '选择文件',//按钮上显示的文字,
                htmlIcon : ' '//按钮上的文件图标,注意这个引号后面多一个空格,这个空格是图标和text中设置的文字中间空隙,如果删掉这个空格,图标和文件会非常紧凑,不太自然
            });

还有其他的属性这里就先不讲述了,这些已经能满足目前的要求了

我要做的是美化一下选择文件的按钮,选择按钮方式代替input file是因为默认的input file太难看,用按钮click事件中主动触发input file选择文件在ie下又是会出错的,所以想到用一现在的方法解决

直接贴代码:

$('input[type=file]').filestyle({
                input : false,
                btnClass : 'btn-primary',
                text:'选择文件',
                htmlIcon : ' '
            });

原来项目中已经有input显示文件名了,所以我这里不准备用它自带的input,所以我设置成false,

用上之后发现它的这个button独占一行,是这个样子:
jquery-filestyle上传按钮样式使用

这个只能根据页面布局的情况调样式了,下面分享我的这种情况,可能对大家也有效:
我把bootstrap-filestyle.min.js中创建button的最外层标签加了一点样式,从浏览器查看button元素,发现它最外层是被一个div套着,class="bootstrap-filestyle input-group",去bootstrap-filestyle.min.js文件中搜这个代码,发现只有一个地方jquery-filestyle上传按钮样式使用
给他添加style:

效果如下:
jquery-filestyle上传按钮样式使用

我试了一下和这个项目页面布局不一样的情况,这种方式就不好用了,只能看具体情况调了。

之后觉得这个按钮距离左边的距离有点大,查看之后是里面有个span标签有个margin-left:20px的样式,这个样式使用的bootstrap.css中的,不能改这个文件,只能单独改span标签样式:

jquery-filestyle上传按钮样式使用

jquery-filestyle上传按钮样式使用

加完之后效果:

jquery-filestyle上传按钮样式使用


网站名称:jquery-filestyle上传按钮样式使用
网站地址:http://cdweb.net/article/psohii.html