修改 input type=file 的样式的最简单方法

很多人说网页中<input type="file">的样式是很难修改的,事实上也是,bootstrap也没用对其有什么美化,但是那么丑,要怎么修改呢?

其实很简单!!!很多人都想复杂了。

先卖个关子,有些人是这么做的,另外写一个按钮的样式,然后将自己写的按钮和这个默认的样式的定位改为重合,并将默认的按钮设置opacity:0,即设置透明度为完全透明,这样就可以在表面上是点击自己定义的样式,而实际上是点击input这个按钮。这正是这篇博客所说:https://blog.csdn.net/dear_mr/article/details/56040549

可是让这两个东西完全重合,不是很麻烦的一件事情么,这个想法可以去回答知乎的:有哪些看似精妙实际很蠢的设计
这里写图片描述

从上面的方法中得到了如下思路,下面进入最简单的方法:
1、重写一个新的样式
2、将默认样式设置display:none;,即设为不可见
3、在js里调用:当点击新样式的时候,调用这个input的点击事件

这就完啦!!!何必还要多此一举将两个东西设为完全重合呢,写新样式就完全可以放飞自我啦

下面附上简单的代码吧,我的js用了jquery框架

html

<div class="head-img">
    <img src="./imgs/王小波.jpg" id="my-img">          
    <input type="file" id="img-upload"/>
</div>

css

.head-img{
    text-align: center;
}

#img-upload{
    display: none;
}

js/jquery

$(document).ready(function(){
    $('#my-img').click(function(){
        $('#img-upload').click();
    });

});

效果如下图,点击王小波的皂片就可以弹出文件选择框啦
这里写图片描述

  • 71
    点赞
  • 99
    收藏
    觉得还不错? 一键收藏
  • 43
    评论
要实现input[type='file']样式美化及图片预览,可以使用以下步骤: 1. 创建一个label元素,将input[type='file']元素隐藏在label里面,并设置label的样式。 2. 给input[type='file']元素设置一个change事件,当选择文件后触发事件。 3. 在change事件中获取选择的文件,并将文件转换成URL格式,用于预览。 4. 创建一个img元素,设置src属性为URL格式的文件,即可实现预览效果。 以下是一个简单的示例代码: ```html <!-- HTML部分 --> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> 选择文件 </label> <input id="file-upload" type="file"/> <div id="preview"></div> ``` ```css /* CSS部分 */ .custom-file-upload { display: inline-block; padding: 6px 12px; cursor: pointer; font-size: 16px; font-weight: bold; color: #fff; background-color: #337ab7; border-color: #2e6da4; border-radius: 4px; } #preview { width: 200px; height: 200px; margin-top: 20px; border: 1px solid #ccc; } ``` ```javascript // JavaScript部分 var input = document.getElementById("file-upload"); var preview = document.getElementById("preview"); input.addEventListener("change", function() { var file = this.files[0]; var reader = new FileReader(); reader.addEventListener("load", function() { preview.innerHTML = '<img src="' + reader.result + '" />'; }, false); if (file) { reader.readAsDataURL(file); } }, false); ``` 以上代码中,我们用label元素包裹隐藏的input[type='file']元素,并设置了一个自定义样式。当用户点击“选择文件”按钮时,实际上是触发了input[type='file']元素的点击事件,从而弹出系统文件选择框。 在input[type='file']元素的change事件中,我们获取选择的文件,并使用FileReader对象将文件转换成URL格式。最后,我们创建一个img元素,将URL格式的文件设置为其src属性,即可实现预览效果。 需要注意的是,由于安全性限制,我们无法直接读取本地文件的路径,因此需要使用FileReader对象将文件转换成URL格式才能进行预览。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 43
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值