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文件夹下的文件,是一些图标,所以这两个文件夹
的相对位置不能改变,不然需要修改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 : '<span class="oi oi-folder"></span> '//按钮上的文件图标,注意这个引号后面多一个空格,这个空格是图标和text中设置的文字中间空隙,如果删掉这个空格,图标和文件会非常紧凑,不太自然
            });

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

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

直接贴代码:

$('input[type=file]').filestyle({
                input : false,
                btnClass : 'btn-primary',
                text:'选择文件',
                htmlIcon : '<span class="oi oi-folder"></span> '
            });

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

用上之后发现它的这个button独占一行,是这个样子:

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

效果如下:

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

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

加完之后效果:

相关推荐:

python file怎么打开

Python文件是纯文本,需用编辑器查看/编辑、终端运行、IDLE学习或谨慎双击;推荐VSCode等支持语法高亮的工具编辑,终端用python/python3命令执行,IDLE适合初学者快速上手。 Python文件(.py)本身是纯文本,不能像Word或Excel那样“双击直接运行并看到结果”,但你...

vue iView 上传组件之手动上传功能

基于Vue的UI组件库现在已经有很多了,尤其是移动端的。现在又多了一个iView。 iView主要服务于PC界面的中后台业务,是一套高质量的开源UI组件库,先上地址: https://github.com/iview/iview 官网是: https://www.iviewui.com/ 特性 使用...

Java的File类怎么使用

今天小编给大家分享一下Java的File类怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。概述要学习Java中的File类,首先我们要知道,在Java的API中File类的定义,...

angular 文件上传

文件上传时的处理$scope.submit = function(){     var url = $scope._datalistmodel.impexp.imp;    &nb...

java如何判断file文件是否存在

此示例显示如何使用File类的file.exists()方法检查文件的存在。packagecom.yiibai; importjava.io.File; publicclassFileExistence{ publicstaticvoidmain(String[]args){ Filefile=ne...

PHP中如何使用 file文件系统函数

PHP中如何使用file文件系统函数,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。file -把整个文件读入一个数组中返回数组中的文件。数组的每个元素对应于文件中的一行,并且换行符仍然附加。失败时,file()返回FALSE。...

怎么使用jquery实现不用点击file类型的input弹出文件选择对话框

这篇文章主要介绍“怎么使用jquery实现不用点击file类型的input弹出文件选择对话框”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用jquery实现不用点击file类型的input弹出文件选择对话框”文章能帮助大家解决问题。可以使用trigge...

js实现上传按钮并显示缩略图小轮子的方法

这篇文章主要讲解了js实现上传按钮并显示缩略图小轮子的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。前言造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点,而且还不能直接修改这个按钮的样式,所以就打算直接搞个小轮子方便日后需要时使用。使用原生js实现。那么...