用图片替换input file 的样式（上传图片 文件图标）

最新推荐文章于 2024-05-30 08:00:00 发布
最新推荐文章于 2024-05-30 08:00:00 发布
阅读量1w 收藏 3
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wbj16116/article/details/79939744
版权

把input 设为透明 的。后面放一张图片

                                     <label>
                                        <input style="position:absolute;opacity:0;" type="file" name="file" id="Album_img" accept="image/gif,image/jpeg,image/x-png"/>
                                        <img style="width: 60px;height: 60px;" src="/public/images/add-button.jpg"> 
                                    </label>
wbj16116
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
修改input file 原始样式，img标签/button覆盖原始上传样式，input file @change传值
吾行远方
04-29 2970
修改input file 原始样式，img标签/button覆盖原始上传样式，input file @change传值input file 原始样式很丑，实际使用中需要将其修改为符合当前项目的风格，本文以上传图片为例个人项目效果，红色框中的就是按钮，点击后调用摄像头或者本地文件夹上传 证件照片，后台处理返回结果前端自动反写input file 原始样式效果如下：img标签覆盖原始上传文件样式CSS...
jquery 美化下拉框,单选按钮,上传文件input typeFile的插件
03-14
至于上传文件的`input[type="file"]`元素，它的默认样式通常显得很简陋，不符合现代网页设计的需求。`jQuery`插件可以提供一种更加友好的用户界面，例如使用一个自定义按钮来触发文件选择对话框，隐藏实际的`input...
用加号图标代替input type=file实现添加文件，清空input file
小小酥的博客
11-17 757
效果图如上，通过点击该加号图片可以实现input选择文件，原理即在该图片上面写了个input隐藏，在图片点击事件中添加input的模拟点击。 <input class="mui-hidden" type="file" id="inputBox" accept="image/*" capture="camera">//input <div id="photo" class="ph...
Vue3上传下载的样式模版 | 附Demo（Vue3 + Java）
最新发布
码农研究僧的博客
05-30 1036
基本的Vue3知识推荐阅读：Vue 目录 由于是Java作为后端，此处补充Java的基本接口：（只提供思路，后端代码给的不全） 对应的上传下载推荐阅读：【Java项目】实战CRUD的功能整理（持续更新）
如何用一张图片代替，input:file上传本地文件
qq_36396822的博客
05-25 494
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有明白面试官的真正意图,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传本地文件?? 　　因为默认的<input type='file'>上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能?? 也就是—— 将这个玩意: 换成这样的: 当时我的解决方案是这样的: <input type="file" style="d...
如何用一张图片代替 'input:file' 上传本地文件??
03-03 214
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有明白面试官的真正意图,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传本地文件?? 　　因为默认的<input type='file'>上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能??也就是—— 将这个玩意:...
input上传图片改变样式
qq_42975998的博客
03-17 3418
上传图片直接使用&amp;amp;lt;input type=&amp;quot;file&amp;quot;&amp;amp;gt;的话，样式会比较难看： &amp;amp;lt;input type=&amp;quot;file&amp;quot; id=&amp;quot;file&amp;quot; accept=&amp;quot;image/*&amp;quot;&amp;amp;gt; &a
ajax 文本变input,jQuery ajaxForm 提交前替换input file内容
weixin_39575212的博客
08-05 2394
现在招到一个方案，在submit之前，替换里面的参数，用下面的代码把base64的数据转换成Blob，在new File得到文件，替换提交参数里面的file值。有个缺陷是Safari和IE上不能new File，无解~~~function dataURItoBlob(dataURI) {// convert base64 to raw binary data held in a string// ...
用jquery上传图片，视频，以及其他类型的文件
03-18
在本文中，我们将深入探讨如何使用jQuery库来上传图片、视频和其他类型的文件。jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在这个场景中，我们关注的是jQuery.upload.js，这...
jQuery实现的对上传图片进行裁剪插件
07-07
在IT行业中，前端开发经常会遇到用户需要上传图片的需求，而为了保持网站性能和美观，往往需要对上传的图片进行尺寸限制或裁剪。这个“jQuery实现的对上传图片进行裁剪插件”就是为了满足这样的需求而设计的。下面将...
jquery上传文件插件filestyle
02-03
**jQuery Filestyle插件**是一种简洁高效的文件上传组件，它为网页中的文件上传功能提供了美观且用户友好的界面。这个插件充分利用了流行的JavaScript库jQuery的强大功能，简化了开发人员在网页设计中实现文件上传...
7种时尚的文件上传表单域美化特效
04-20
首先，我们可以使用CSS来隐藏默认的文件选择按钮，然后用自定义的图形或文字替换它。通过设置 `opacity: 0;` 或 `display: none;` 可以隐藏原始元素，再用一个相对定位的元素覆盖在上面，实现自定义样式。 2. **...
修改input file的样式（或用按钮button替代file）
热门推荐
仰望星空
11-09 2万+
问题：        我们在使用时，会发现它的样式不好修改，页面浏览字样也不可以修改，后面还会有出现”文件名“的属性，这样会严重影响页面效果。 解决方法：我们使用“button”按钮来替代"file"按钮: （1）书写HTML代码 （2）修改按钮的样式 .se2{ width:100
input type=''file''美化 及 文件上传img src显示问题
优雅的博客
09-21 2576
                                                                                         原始界面                展示界面                          非图片格式界面为了实现上图的功能，点击“请选择商品图片”，然后就能选择电脑里的图片并在方框里显示出来，如果不是图片格式，提...
jquery更改input file的图片
weixin_42344266的博客
06-05 1683
html代码：&lt;input id="file_upload" type="file" /&gt;&lt;div class="image_container"&gt;    &lt;img id="preview" style="height:130px;width:117px;border-width:0px;"/&gt;&lt;/div&amp
css input[type=file] 样式美化，input上传按钮美化
一直很安静
07-21 4916
我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的 思路： input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 代码如下： DOM结构： href="javascript:;"
html+input改变图标,JS Input里添加小图标的两种方法
weixin_39980298的博客
06-04 1073
我们在做网页的时候，经常需要在input里面添加小图标，那么这里就介绍比较常见的两种方法。将小图标当做input的背景来插入，直接上代码吧：Box{height: 50px;background: yellow;}.Box input{width: 200px;height: 30px;border-radius: 15px;margin: 10px 0;background: url(image...
type="file"按钮美化及获取路径
weixin_34254823的博客
07-10 240
2019独角兽企业重金招聘Python工程师标准>>> ...
如何 更换vue的图标_如何使用vue.js将按钮替换为图标
weixin_33364627的博客
12-29 539
I want to include an icon or image instead of a button. since, i have taken "input type="file" i am not able make this button as an icon. Is there any way to add (+ icon) inside the div border? In tha...
input file文件上传
07-28
Vue中实现文件上传可以使用HTML5的File API，具体步骤如下： 1. 在模板中添加一个input标签，type为file，用于选择文件： ``` <template> <div> <input type="file" @change="handleFileUpload"> </div> </template> ``` 2. 在Vue实例中定义一个方法，用于处理文件上传： ``` <script> export default { methods: { handleFileUpload(event) { const file = event.target.files[]; // 处理文件上传逻辑 } } } </script> ``` 3. 在handleFileUpload方法中，可以使用FormData对象将文件上传到服务器： ``` <script> export default { methods: { handleFileUpload(event) { const file = event.target.files[]; const formData = new FormData(); formData.append('file', file); // 发送文件上传请求 axios.post('/upload', formData).then(response => { // 处理上传成功的逻辑 }).catch(error => { // 处理上传失败的逻辑 }); } } } </script> ``` 4. 在服务器端接收文件上传请求，可以使用Node.js的multer中间件来处理文件上传： ``` const express = require('express'); const multer = require('multer'); const app = express(); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, file.originalname) } }); const upload = multer({ storage: storage }); app.post('/upload', upload.single('file'), (req, res) => { // 处理文件上传成功的逻辑 }); ``` 以上就是Vue中实现文件上传的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值