input type=file选择图片按钮样式修改与图片预览

1 背景

通过上图我们可以看到input type=file按钮的默认样式，非常不美观，如果要自定义该按钮的样式，要如何实现呢？

2 方式1样式

input覆盖整个按钮区域，并且设置完全透明

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {position: relative;width: 100px;height: 100px;line-height: 100px;background-color: #ccc;text-align: center;}#file {width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;}</style>
</head>
<body><div>选取图片<input type="file" accept="image/*" id="file"></div>
</body>
</html>

3 方式2样式

input隐藏，通过label设置按钮样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;line-height: 100px;background-color: #ccc;text-align: center;}#file{display: none;}label {display: block;width: 100%;height: 100%;}</style>
</head>
<body><div><input type="file" accept="image/*" id="file"><!-- 将label与input建立关系，点击label等于点击了input --><label for="file">选取图片</label></div>
</body>
</html>

4 图片预览

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(function() {// input选取文件后会触发change事件$('#file').on('change', function(event) {console.log(event.target.files) //选取的文件对象数组// 通过FileReader读取文件对象信息var reader = new FileReader()reader.onload = function(e) {var img = new Image()img.src = e.target.result //读取结果会转为base64数据格式img.style.width = '200px'document.body.appendChild(img)}reader.readAsDataURL(event.target.files[0])})})
</script>

5 js动态创建input方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.file {width: 100px;height: 100px;line-height: 100px;background-color: #ccc;text-align: center;}</style>
</head>
<body><div class="file">选取图片</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>$(function() {$('.file').on('click', function() {// 动态创建input元素，type为file，样式为隐藏，并追加到body中var input = $('<input/>')input.prop('type', 'file')input.css('display', 'none')$('body').append(input)// 监听选取文件触发的change事件input.on('change', function(event) {console.log(event.target.files) //选取的文件对象数组// 通过FileReader读取文件对象var reader = new FileReader()reader.onload = function(e) {var img = new Image()img.src = e.target.result //读取结果会转为base64数据格式img.style.width = '200px'document.body.appendChild(img)}reader.readAsDataURL(event.target.files[0])// 完成选取文件后，从dom中自我删除input.remove()})// 自动触发click事件去选取文件input.click()})})</script>
</body>
</html>

6 效果展示

input type=file选择图片按钮样式修改与图片预览相关推荐

在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果
通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上 ...
安卓微信内置浏览器 input type=file 选择文件未响应
微信内置浏览器采用以下形式选择图片不响应 <input type="file" accept="image/*"/> 解决思路步骤一.调微信接口得 ...
html5判断file选择状态,HTML input type=file选择图片立即显示
主要用来ul li来排列显示的图片. 引入jQuery CSS 代码: html,body{ margin:0px; padding:0px; } #tdAdd input{ height: 100% ...
html选择文件按钮美化,css input[type=file] 样式美化，input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 1. 思路 inp ...
css input[type=file] 样式美化，input上传按钮美化
思路: 原文出处:http://www.haorooms.com/post/css_input_uploadmh input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0, ...
input[type=file]去掉“未选择任何文件”及样式改进
原文地址:input[type=file]去掉"未选择任何文件"及样式改进 - 腾讯云开发者社区-腾讯云 input 标签的 file 属性,在没有选择文件的情况下,默认显示一条文 ...
利用css对input[type=file] 样式进行美化，input上传按钮美化
2019独角兽企业重金招聘Python工程师标准>>> <input type="file" name="fileUpload"/> ...
html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明将inp ...
input type=file 获取选择文件名称、路径方法及input上传按钮美化
获取文件名 document.getElementById('upload').files[0].name; 获取文件路径 document.getElementById('upload').valu ...

input type=file选择图片按钮样式修改与图片预览

1 背景

2 方式1样式

3 方式2样式

4 图片预览

5 js动态创建input方式

6 效果展示

input type=file选择图片按钮样式修改与图片预览相关推荐

最新文章

热门文章