html 美化input file,Input[type=”file”] 显示效果美化方法

Html中input可以作为上传图片代码如下

但是演示非常不好看，下面做一番美化处理，效果如下：

文件上传美化前后对比

美化方法隐藏 input 标签

使用 label 标签在input标签位置显示；

用js获取 input 中上传的文件名称，并在 lable 标签中显示

input[type=”file”] 美化之 Html/**

* input 文件上传 Html

* @author 智慧宫

* @link https://www.hanost.com

input[type=”file”] 美化之 CSS

使用opacity: 0; 隐藏input标签，美化lable标签；/**

* input 文件上传 CSS

* @author 智慧宫

* @link https://www.hanost.com

.img-upload {

position: relative;

display: inline-block;

width: 100%;

margin-bottom: 0;

height: calc(3.5rem + 28px);

}

.img-upload-input {

position: relative;

z-index: 2;

width: 100%;

height: calc(3rem + 28px);

margin: 0;

opacity: 0;

}

.img-upload-label {

position: absolute;

top: 0;

left: 0;

bottom: 0;

width: 100%;

background: #f0f0f0;

text-align: center;

padding: 1.5rem;

}

input[type=”file”] 美化之 JS

使用JS 来获取上传文件的名称，并在 label 标签中显示上传的文件名/**

* input 文件上传 JS

* @author 智慧宫

* @link https://www.hanost.com

$(".img-upload").on("change", "#img-upload-input", function () {

var filePath = $(this).val();

if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {

var arr = filePath.split('\\');

var fileName = arr[arr.length - 1];

$("#img-upload-label").html(fileName);

}

})

美化效果展示

input 美化效果展示

html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫相关推荐

js/jquery 获取本地文件的文件路劲获取input框中type=‘file’ 中的文件路径(转载)...
原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲获取input框中type=' ...
模拟input type=file
表单中的input type="file"在前端开发中经常会用到,但是很悲剧的是input type="file"在各个浏览器下表现不统一,样式很难起作用: 通 ...
html input type=file 文件上传; 图片上传; 图片闪烁
(1)input file 对话框和获取选中文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
为type=file的input标签制定样式——CSS基础
为type=file的input标签制定样式 1. 概述 2. 实验 3. 解决方法与解析 1. 概述在现在的前端开发中,为了开发的效率,大都会引入第三方库加快开发速度.查阅官方文档,一顿复制黏贴, ...
input type=“file“属性详解，利用capture调用手机摄像头
<input> type 类型为 file 的标签,可以选择一个或多个文件,通过表单上传到服务器,也可以通过 Javascript 的 File API 对文件进行操作. 实例: < ...
H5(移动端)前端使用input type=file 上传图片，调用相机和相册
<input class="addPicInput" type="file" ref="uploadFile"@change=&quo ...
用加号图标代替input type=file实现添加文件，清空input file
效果图如上,通过点击该加号图片可以实现input选择文件,原理即在该图片上面写了个input隐藏,在图片点击事件中添加input的模拟点击. <input class="mui-hid ...
＜input type=“file“＞实现上传文件
嗨害嗨,我又来了奥.今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件.首先,我们写好html,如下. <form id="f ...
html读取input type=file文件内容
<input id="uploadInput" type="file" class="file_input" name="m ...

html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫

html 美化input file,Input[type=”file”] 显示效果美化方法 | 智慧宫相关推荐

最新文章

热门文章