自定义 input file 样式及 js 上传图片本地预览

最新推荐文章于 2022-09-20 16:28:56 发布
最新推荐文章于 2022-09-20 16:28:56 发布
阅读量318 收藏
点赞数
分类专栏： javascript 文章标签： js html html5 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxciwangbiao/article/details/109717900
版权
本文介绍如何使用HTML5和JavaScript实现自定义input file样式，并实现图片上传前的本地预览。只需复制提供的代码，保存为HTML文件并用浏览器打开即可体验效果。
摘要由CSDN通过智能技术生成

效果图

自定义 input file 效果预览

使用说明

复制代码，保存为 html 格式后，直接用浏览器打开即可。

代码

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title>自定义 input file 样式及 js 上传图片本地预览</title>
        <!-- 图标字体库 -->
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <style type="text/css">
            .file {
   
                position: relative;
                display: inline-block;
                height: 30px;
                line-height: 30px;
                padding: 0 10px;
                background-color: #009688;
                color: #fff;
                white-space: nowrap;
                text-align: center;
                font-size: 15px;
                border: none;
                border-radius: 2px;
                cursor: pointer
最低0.47元/天 解锁文章
biaowong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
input file自定义
深漂小码哥
06-29 380
思路：input 透明度为0并绝对定位，外层套一个div用相对定位，内层元素用绝对定位 示例代码： <div style="width: 104px;position: relative;height: 30px;line-height: 30px;margin-bottom: 12px;border: 1px solid #D9D9D9;"> <img style="position: absolute;left: 14px;
自定义input File
qq_37742572的博客
02-14 632
首先说明原理： 因为表单中input file标签在不同的浏览器中样式不一致，且很难对其设置样式，所以我们的解决方案是用其它的标签去代替它，而它本身则不显示。这样就实现了间接显示样式。 ``` &lt;div&gt; &lt;input type="button" value="自定义的按钮名" onclick="javascript:$('input[name=\'file\']').clic...
自定义input file样式
热门推荐
Ghjkku的博客
09-20 7万+
自然，现在点击“上传图片”这块区域是不管用的，现在要做的就是使“选择文件”的响应区域与之重合。“上传图片”这按钮太长了，理想的状态是使他的宽度随文本长度而变，且我们可以使用。现在按钮内所有区域都能响应了，但你会发现，按钮外的很大一部分区域也会响应...宽度也调整好了，但总不能使用这个样子的按钮吧，那就将它透明度设置为'0'隐藏起来(现在我们先来改下包裹文字的。
【前端】input file label自定义上传样式
weixin_38792911的博客
10-28 471
一般上传文件会使用 <input type="file"/> 同时还会自己设定样式，这是就需要使用label标签的for属性来进行绑定。比如： //for的值为input的id <label for="selectImage"> //accept是可接受上传的文件类型 <input id="selectImage" type="file" style="display:none;" accept="image/gif, image/jpeg, image/x-png,
javascript实现input file上传图片预览效果
11-23
在JavaScript中，实现input file上传图片预览效果是常见的前端功能，...以上就是利用JavaScript实现input file上传图片预览效果的详细过程，这个功能在许多网站的图片上传功能中非常常见，能给用户带来更好的交互体验。
自定义上传控件input file的样式
03-19
本篇将探讨如何自定义`input file`的样式，打造个性化的上传界面。 首先，了解`<input type="file">`的基本结构。这是一个内联元素，用户点击后可以打开文件选择对话框。由于安全原因，浏览器对这个控件的样式限制...
jquery实现兼容浏览器的图片上传本地预览功能
10-26
### jQuery 实现兼容浏览器的图片上传本地预览功能 #### 概述 随着网络应用的发展，用户对于上传图片时能够即时预览的需求越来越强烈。这不仅提升了用户体验，还能有效减少因上传错误格式或大小不合适的图片而带来...
vue.js 图片上传并预览及图片更换功能的实现代码
10-18
在Vue.js中实现图片上传、预览以及图片更换功能，主要涉及到HTML结构设计、JavaScript处理逻辑和CSS样式美化。下面将详细阐述这个过程。 首先，HTML部分是整个功能的基础，包含了一个图片显示区域（`<img>`标签）和...
H5上传本地图片并预览功能
08-30
需要注意的是，为使上传按钮看起来更像原生的上传样式，可以使用CSS样式`opacity:0`来隐藏原生按钮，只保留自定义的上传按钮。 知识点二：图片预览功能的实现 图片预览功能是通过JavaScript中的FileReader API来...
自定义input=file样式
木槿之夏
04-10 534
css部分： .pickFileBox{ position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 8px; padding: 4px 12p...
自定义input的file标签形状
foreverling_ling的博客
08-19 2102
问题最近有一个需求是自定义input的file标签形状。file是input标签的一个属性，每个浏览器都有自己的一个形状，可点击区域也不尽相同，如下：Chrome和Opera Firefox IE11 IE10及其以下 可点击区域均用绿色线框标明。可以清楚地看到，IE10及其以下的点击区域
实现html上传图像时预览
weixin_30254435的博客
04-23 168
今天写项目的时候有个想要在修改个人信息的时候，上传图片可以选择预览，经过多番查找，找到一个比较有效的方法，这也是一个比较常用的需求，这里给大家分享。js代码见下 <script type="text/javascript"> //下面用于图片上传预览功能 function imgChange(headInput) { var headPreview=document...
html上传图片的预览功能实现
weixin_30919571的博客
08-16 494
表单代码（仅取上传文件部分）： <input class="selectImg" style="position:absolute;opacity: 0;width:100px;height:100px;" type="file" name="coverChart" onchange="showImg(this)"> js代码： // 图片预览 fu...
javascript input上传图片改变样式及预览图片，FileReader预览图片
cdcdhj的博客
06-14 1035
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //这里透明化了input框，然后绝对定位在按钮上了 .
input框文件类型 图片展示
qq_41181141的博客
11-19 267
let reader = new FileReader() f = <input type="file"> f.files : FileList {0: File, length: 1} 0: File {name: "1.jpg", lastModified: 1599530631124, lastModifiedDate: Tue Sep 08 2020 10:03:51 GMT+0800 (中国标准时间), webkitRelativePath:
上传文件html写法,HTML中文件上传时使用的<input type="file">元素的样式自定义
weixin_33117513的博客
06-03 587
Web页面中，在需要上传文件时基本都会用到元素，它的默认样式：chrome下：IE下：不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。根据用户的需求，设计风格，改变其显示样式的场合就比较多了。如果，要像下面一样做一个bootstrap风格的上传按钮该如何实现。搭建上传按钮所需的基本元素复制代码代码如下: 上传 效果(chrome)：现在看到的分两行显示。外围之所以没有换成div，是因...
html5+input+图片,HTML/HTML5 Input类型&&表单
weixin_35804761的博客
06-09 217
1.HTML 中"不常用"input类型中的属性值：disabled：输入字段禁用；maxlength：输入字段的最大字符长度；readonly：输入字符只读，无法修改；size：输入字段可见字符数。1 2 3 4 5 6 执行结果：注意：测试浏览器为chrome；siz...
input file 保存图片
diebi7596的博客
01-18 388
Request.File["控件名称"].FileName 文件名称（没有路径） Request.File["控件名称"].SaveAs("路径名称"); 参考文档：http://blog.csdn.net/dcasc/article/details/9139477 转载于:https://www.cnblogs.com/fightingstepup/p/5138599.ht...
js 怎么实现自定义样式的input file
最新发布
03-26
一种可能的实现方式如下所示： 1. 创建一个包含样式的CSS类或者ID。 ```css .custom-file-input { position: absolute; /* 使文件选择框覆盖在自定义的按钮之上 */ opacity: 0; /* 隐藏默认的文件选择框 */ z-index: -1; /* 避免文件选择框挡住其他内容 */ } .custom-file-label { /* 自定义样式的文件选择文本 */ background-color: #007bff; color: #fff; border-color: #007bff; } .custom-file-label::after { /* 自定义样式的“选择文件”文本 */ content: '选择文件'; display: inline-block; background-color: #28a745; color: #fff; border-radius: 4px; padding: 6px 12px; cursor: pointer; } ``` 2. 在HTML文件中添加一个文件选择框和一个自定义按钮，使用相同的label标签关联它们。 ```html <label class="custom-file-label" for="customFile">选择文件</label> <input type="file" class="custom-file-input" id="customFile"> ``` 3. 使用JavaScript来监听文件选择框的change事件，当用户选择文件后更新自定义文本框的文本。 ```javascript // 获取文件选择框和自定义文本框 const fileInput = document.getElementById('customFile'); const fileLabel = fileInput.nextElementSibling; // 监听文件选择框的change事件 fileInput.addEventListener('change', function(event) { const fileName = event.target.files[0].name; // 更新自定义文本框的文本 fileLabel.innerText = fileName; }); ``` 这样就实现了一个简单的自定义样式的文件选择框。注意，上述实现方式可能不兼容所有浏览器和操作系统，需要进行相应的兼容性测试和调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值