修改文件上传默认样式

最新推荐文章于 2020-10-13 17:10:47 发布

原创最新推荐文章于 2020-10-13 17:10:47 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用jQuery插件filestyle来美化HTML中文件上传按钮的方法，并提供了样式定制的示例代码及效果预览。

demo地址：
http://www.appelsiini.net/projects/filestyle/demo.html


$("input[type=file]").filestyle({
	image: "<%=path%>/nbp/images/pic/openFile1.png",
	imageheight: 22,
	imagewidth: 82,
	width: 180
});

补个效果图：
[img]http://dl.iteye.com/upload/attachment/0078/3731/5a4edc1f-5ddc-34a1-905f-ebb43b584a59.png[/img]

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_15015

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML中文件上传时使用的input type=”file”元素的样式自定义

12-14

这个元素在不同的浏览器下，默认样式会有差异，通常是简单的文本输入框样式，可能与网站的整体设计风格不匹配。为了满足用户界面的需求和提升用户体验，我们需要对这个元素进行自定义样式设计。在创建一个...

修改文件上传按钮样式

04-26

type=file修改按钮样式

参与评论您还未登录，请先登录后发表或查看评论

修改文件上传的默认样式

weixin_42903350的博客

02-22

2464

修改文件的上传样式默认的上传样式看起来有点丑，我们经常可能要去修改它，input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。直接上代码：如下 //css <style> #upload{ padding: 0px 15px; line-height: 30px; position: relati...

文件上传样式修改

weixin_30325071的博客

06-29

219

在html中的input file文件上传控制默认风格与样式很难看，所以这里进行了修改。 <span class="file"> <%= f.file_field :file%> </span> 生成对应的html代码如下： <input type="file" id="file"> chrome ...

文件上传input file默认样式修改

飞云钰哥

09-28

1839

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传按钮修改样式</title> <style> .file-box{ display: inline-block; position: relative; pad

文件上传框样式

04-20

博客链接（由于无法直接访问，这里不提供具体内容）可能讨论了如何通过CSS来改变文件上传框的外观，包括修改边框、背景色、字体、大小等。CSS3引入了更多的选择器和属性，如`:before`和`:after`伪元素，可以用来添加...

WebUploader照片上传，file文件图片上传样式美化，多上传按钮处理，支持IE9+

04-03

WebUploader默认的样式可能较为简单，但可以通过自定义CSS覆盖其默认样式，以符合项目设计风格。主要涉及的元素有`webuploader-element`类的按钮样式，以及`file-list`列表中的图片预览样式。例如，可以改变按钮的...

js自定义input文件上传样式

10-17

总结来说，这篇文章详细介绍了如何在前端使用JavaScript和CSS来自定义input文件上传的样式，并结合了AJAX技术来实现异步上传。这可以帮助开发者设计出更为美观、用户友好的文件上传界面，同时提供了后台处理文件上传...

修改file按钮的默认样式实现代码

09-05

本教程将详细介绍如何通过CSS和JavaScript（使用jQuery库）来修改file按钮的默认样式，创建一个更加吸引人的用户界面。首先，我们来看HTML结构。这里创建了一个`<form>`元素，其中包含一个id为`addFile`的`...

上传文件样式修改

msy_msy的博客

09-27

410

html: 上传 css: label{ border-radius: .4rem; background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: pointer; margin-bot

修改默认上传文件样式

bymyself11的专栏

01-04

475

修改自定义上传按钮样式 * { margin:0; padding:0; } body { font:14px Verdana, Arial, Geneva, sans-serif; color:#404040; background:#f9f9f9; } .main{ width:300px; height:60px; position:absolu

修改文件上传样式实现文件列表功能

catbaby1111的博客

10-13

725

修改文件上传的样式修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位，然后让input元素绝对定位，并且可见度为0，就是看不见，但是点击也能出现选择文件的效果，input元素再增加一个兄弟节点，就是我们说的按钮，选择文件对外显示按钮样式效果。 html代码： <form id="contractMessage" enctype="multipart/form-data"> div class="upload-btn"&g

多文件上传样式改变

lobinsonCJX的博客

12-16

1214

使用inputfile上传文件，上传文件的框简直不要太寒碜，最近做多文件的上传，修改了一下上传方式，在这做下记录。改变inputfile的样式是不太现实的事情，所以参考了网上，有两种方式去改变：将inputfile设置为不可见状态，然后使用一个a标签或者一个按钮去执行对这个inputfile的点击事件达到选择文件的要求，并且由于是使用的a标签或者按钮，样式可以随意的设定。在

前端样式之自定义弹窗，上传文件框的默认样式修改，div渐变色设置

weixin_41897122的博客

03-03

1317

写在前面前端的CSS样式繁多,关联性又不大,让前端的小伙伴们头皮发麻,我也是其中之一,有空将用到的有趣又容易忘记的CSS样式做一个总结归纳,(其中很多是前辈的总结)方便自己以后查找用,当然如果能帮到各位一二,亦不胜荣幸 1.遮罩层.我用于做自定义弹窗,简单快速,再ajax传输也不影响原网页刷新,方法如下: <div id="zhezhao"> <div id="tanchua...

改变上传文件表单默认样式

hero_hope的博客

06-09

4829

一.上传文件表单默认样式 1.代码<div style="margin-top:50px; text-align:center"> <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <input id="f

修改input[type="file"]文件上传样式的2种方法

02-08

7015

问题说明一般input[type=”file”]都不会采用默认样式，因此需要将真正起作用的隐藏掉，显示一个设计出的按钮样式。隐藏的方法有2种，一种是visibility:hidden，一种是opacity:0。visibility:hidden会给元素留有位置，但是通过点击无法触发事件。一般按钮上划上去时要添加cursor:pointer，但是在input[type=”file”]默认按钮上不...

修改传统上传文件<intput type=“file” name=“test”> 样式

Nicholas_long的博客

09-28

925

老规矩还是先上图：传统的上传文件样式：修改之后的样式: css样式： label{ position: relative; } #pic1,#pic2,#pic3{ position: absolute; left: 0; top: 0; opacity: 0; } #btn1,#btn2,#btn3{ padding: 5p...

修改input 上传文件样式

最新发布

07-17

在网页开发中，`<input type="file">` 元素的默认样式通常较为简陋，且其外观受限于浏览器和操作系统的默认样式，难以直接通过 CSS 进行深度定制。然而，可以通过结合 HTML 和 CSS 的技巧来实现自定义样式。一种常见的做法是将 `<input type="file">` 元素设置为透明，并将其覆盖在一个自定义样式的按钮上。这样用户点击的是视觉上呈现的按钮，但实际上触发的是文件选择操作。 ### 实现示例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom File Upload</title> <style> .custom-file-upload { display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; font-size: 16px; position: relative; overflow: hidden; } .custom-file-upload input[type="file"] { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; cursor: pointer; } </style> </head> <body> <label class="custom-file-upload"> 选择文件 <input type="file" /> </label> </body> </html> ``` ### 解释 - **`.custom-file-upload`**：这是自定义按钮的样式，设置了背景颜色、文字颜色、内边距等属性，使其看起来像一个按钮。 - **`input[type="file"]`**：将其定位为绝对位置，并设置 `opacity: 0`，使其不可见但仍然可以响应点击事件[^1]。 - **`<label>` 标签**：通过将 `<input type="file">` 放在 `<label>` 标签内部，点击按钮时会自动触发文件选择对话框[^1]。 ### 注意事项 - 由于浏览器的安全限制，某些样式属性（如边框、焦点轮廓等）可能无法完全隐藏或修改，因此需要测试不同浏览器下的表现。 - 如果需要支持多文件上传，可以在 `<input type="file">` 中添加 `multiple` 属性。通过这种方式，可以实现一个外观完全自定义的文件上传按钮，同时保持其功能的完整性。