修改input file 原始样式，img标签/button覆盖原始上传样式，input file @change传值

最新推荐文章于 2020-12-04 21:07:08 发布
最新推荐文章于 2020-12-04 21:07:08 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： input file 原始样式 修改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxyf2018/article/details/89678649
版权
本文介绍了如何修改input file的原始样式，通过img标签和button覆盖方式实现上传按钮的美化。详细展示了CSS代码和效果，以及input file @change事件的参数传递，适用于前端上传图片并处理返回结果的场景。
摘要由CSDN通过智能技术生成

修改input file 原始样式，img标签/button覆盖原始上传样式，input file @change传值

input file 原始样式很丑，实际使用中需要将其修改为符合当前项目的风格，本文以上传图片为例

个人项目效果，红色框中的就是按钮，点击后调用摄像头或者本地文件夹上传 证件照片，后台处理返回结果前端自动反写

在这里插入图片描述

input file 原始样式

<input type="file" id="fileup">
效果如下：

在这里插入图片描述

img标签覆盖原始上传文件样式

    <label>
        <img src="../img/radio.png">
        <input type="file" id="upimg"/>
    </label>
CSS如下：
最低0.47元/天 解锁文章
吾行远方
关注
专栏目录
jQuery实现input[type=file]多图预览上传删除等功能
10-16
根据给定文件内容，下面介绍有关于jQuery实现input[type=file]多图预览上传删除功能的知识点。 ### jQuery实现多图上传预览与删除功能 #### 1. 前端界面结构 在实现多图上传预览与删除功能时，首先需要布局一个...
input type=file选择图片按钮样式修改与图片预览
weixin_42230222的博客
08-19 3216
1 背景 通过上图我们可以看到input=file按钮的默认样式，的确不怎么好看，如果要自定义按钮的样式，该如何实现呢？ 2 方式1样式 input覆盖整个按钮区域，并且设置完全透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
input file上传文件样式支持html5的浏览器解决方案
12-13
最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是file上传控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截图：  在IE10里，双击输入框或者单击按钮都弹出文件选择框。在其他浏览器里单击输入框，按钮或文字都可以触发文件选择框。 鉴于这种混乱情况，有必要要统一样式和行为。下面是我的兼容性方案。 先看一下最终结果在各浏览器的截图： 基本思路：创建输入框和按钮模拟file上
css input[type=file] 样式美化，input上传按钮美化
做个好的手艺人
09-14 525
&lt;a href="javascript:;" class="a-upload"&gt; &lt;input type="file" name="" id=""&gt;点击这里上传文件 &lt;/a&gt; &lt;a href="javascript:;" class="file"&am
Input File样式定义
jantochen的专栏
06-15 184
定义input type="file" 的样式 body{ font-size:14px;} input{ vertical-align:middle; margin:0; padding:0} .file-box{ position:relative;width:340px} .txt{ height:22px; border:1px solid #cdcdcd; w...
自定义input的file样式
weixin_34205826的博客
07-06 122
给input type="file" 加上样式display:none就可以呈现如图的效果。 html: <td><input type="file" name="file" class="hide file" > <div class="tab-File"> ...
前端 自定义显示隐藏_纯CSS自定义input样式
weixin_39616798的博客
12-04 350
一、 input分类根据显示效果将input分为五类文本框类：type值为text，password。按钮类：type值为button，reset，submit。选框类：type值为checkbox，radio。图片类：type值为image。文件类：type值为file。二、原始显示效果首先我们先看一下上述各类input在浏览器中原始显示效果，代码如下 1.文本框类 ...
Vue触发input选取文件点击事件操作
10-14
lastModifiedDate: inputFile.lastModifiedDate.toLocaleString() }); const reader = new FileReader(); reader.readAsDataURL(inputFile); reader.onload = function(e) { that.imgSrc = this.result; } ...
自定义的file标签
12-11
在网页开发中，`<input type="file">`标签是一个常用元素，用于让用户选择本地文件进行上传。然而，浏览器默认的文件选择控件样式通常较为简单，无法满足设计师们对界面美观度和交互体验的高要求。为了实现自定义的...
定义input type=file 样式的方法
12-14
为什么要美化file控件？试想一下，别的孩子都穿戴整齐漂亮，其中两个孩子怎么都不鸟你，太不和谐了。     原始的file控件是这样的：     别以为这个是由一个text和一个button组合成的，它是一个控件，html代码为： 复制代码代码如下: <input type=”file” name=”file” /> 既然这样我们就用一个text和一个button来显示这个file的样式，html代码是这样： 复制代码代码如下: <div class=”file-box”> <form action=”” method=”post” enctype=”multipart/form-dat
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
更改input（file）样式
07-27
更改input（file）样式
图片代替文件浏览按钮样式
09-16
6. **事件处理**：通过JavaScript，可以监听`<input type="file">`的`change`事件，当用户选择文件后，可以显示所选文件的名称或其他相关信息。 在压缩包中的`inputfilebtn`可能包含了HTML文件、CSS文件和图片资源...
input file文件上传_巧妙利用label标签实现input file上传文件自定义样式
weixin_39747511的博客
12-01 418
前言提到上传文件，一般会想到用input file属性来实现，简单便捷，一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求，且在不同浏览器上呈现的样式也不尽相同我们往往需要为其自定义样式，而直接对input添加样式是一件麻烦的事，因为input本身有默认样式，我们需要一一覆盖，并且一些样式我们无法覆盖，比如你想把选择文件的字体颜色设置为和未选择任何文件的字体颜色一样，就无...
使用普通按钮代替input file
zgmzyr的专栏
04-01 9417
使用普通按钮代替input file（转）2009-11-29 05:03今同事问了个关于触发input type=file控件的问题，当时看似简单可是一下子又没搞定，百思不得其解，回来试了一下，终于找到问题，赶紧整理篇文章说道说道。其实很简单，哈哈！    这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候都会用到这个控件。简单实
input file类型自定义样式
Khun_HWJ的博客
08-13 3441
为了让上传这种类型的输入看起来更加美观，但是由于其自身往往无法定义样式，所以我们经常用按钮来 “替代” 它，接下来讲讲其原理和实践过程。 原理：为了让input[type='file']看起来更像一个button，我们首先先采用绝对定位定义一个<a>标签，然后采用绝对定位在相同的位置定义一个和<a>大小完全相同的<input type='file'>，并把其透明...
自定义input file 样式
glap123的博客
09-30 964
效果图 HTML部分 &lt;input type="file" id="file" value="" class="hidden" /&gt; &lt;input type="text" id="uploadImg" value="" /&gt; &lt;button class="btn_sc"
<template> <div> <input type="file" ref="fileInput" @change="onFileChange" /> <button @click="uploadImage">上传图片并识别</button> <div v-if="imageUrl"> <img :src="imageUrl" width="300" /> <div>识别结果：{{ ocrText }}</div> </div> </div> </template> <script> import axios from "axios" export default { data() { return { // 图片地址 imageUrl: "", // 返回文本 ocrText: "", imageFile: null, }; }, methods: { onFileChange(e) { this.imageFile = e.target.files[0]; // 指向对象url this.imageUrl = URL.createObjectURL(this.imageFile); }, async uploadImage() { const formData = new FormData(); formData.append("image", this.imageFile); try { const response = await axios.post("http://localhost:3000/api/ocr", formData); this.ocrText = response.data.text; } catch (error) { console.log(11) console.error(error); } }, }, }; </script>
最新发布
06-03
这段代码看起来是一个 Vue 组件，它通过文件上传功能实现图片的识别。当用户选择文件后，它将创建一个包含文件的 FormData，并将其传递给 OCR API。在成功响应后，它会更新组件的数据以显示识别的文本。 在代码中，您需要确保引入了 axios 库。同时，您需要确保已经正确配置 OCR API 的地址和端口号。如果出现错误，请检查控制台输出以获取更多信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值