js修改input file标签样式

在进行文件上传得过程中，通常需要用到input file 标签，但是由于其默认的表单元素丑陋的外观，你们是不是非常地想吐槽，想大刀阔斧地修改成你自己的所需要的样式呢？

今天我在做上传的时候，也遇到了这个问题，真心太丑，和周围的其他表单元素，完全是格格不入啊。于是就想深入学习了解下，然后找到了一个比较简单的方法。其实很简单，就是通过label标签与input标签绑定，隐藏input标签，给label标签或者label里面的标签的设置样式：

<form action="" method="" enctype='multipart/form-data'><label for='my_file' class='inputlabelBox'><div class="inputBox">点击上传文件</div></label><input type="file" name="myfile" id='my_file' style="display:none;" /></form><img src="" id="img" width="300" />

在通过Js上传图片预览后：

var inputlabelBox = document.querySelector('.inputlabelBox');
var my_file = document.querySelector('#my_file');
var img = document.querySelector('#img'); my_file.onchange = function()
{       var file = this.files[0];var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(){img.src = this.result;}
}

预览效果：

子在川上曰，逝者如斯夫！

js修改input file标签样式相关推荐

修改input file默认样式
2019独角兽企业重金招聘Python工程师标准>>> 一.第一种实现方式 1.通过一个按钮触发file的click事件: 2.file的click事件触发之后,选择一个文件之后,触 ...
php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性首先,控制input,与textarea只读属性是 readonly 在js中可以这样去改变,这里要注意js中O要大写 re ...
js清除HTML的input数据,js 清空 input file 的值的方法
今天在做一个利用 JS 上传本地图片的小功能时,需要在文件上传成功后,清空 file 类型的 input 元素中所选择的本地文件,以方便二次功能的调用!而这篇文章飞鸟慕鱼博客就来说一说,如果利用 js ...
js文件上传以及js清空input file值
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从原生JS, jQuery, 两处着手简单介绍文件上传案例 1.原生JS ...
js获取input file框（文件上传框）内容，上传后台
直接复制,修改jquery为你的本地路径,本js可以把file选择的图片,转化为base64对象.无论是回显,还是转成图片,或者直接上传后台都是可以滴. <!DOCTYPE html> & ...
js/jq input file获取本地文件路径将要上传图片显示到页面
<div class="ge_pic_icon_Infor"><img src="images/moren.jpg"/> </di ...
css select默认选中字体颜色,通过js修改input、select默认字体颜色
textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失输入您要输入的内容 select默认选中项颜色为灰色,选择后变为黑色(js实现) var unSelected = " ...
html option 字体颜色,通过js修改input、select默认字体颜色
textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失获取到元素焦点'){value='';document.getElementById('textarea').style.co ...
about-ie下模拟input file上传功能失效
Q:IE9下file提交到iframe中,load一直不触发,其他高级浏览器均无此问题解决方案:不使用js模拟 input click事件,取而代之的是把真实的input设置为要触发元素的大小,进行 ...

js修改input file标签样式

js修改input file标签样式相关推荐

最新文章

热门文章