javaScript 美化上传文件框

美化上传文件按钮

隐藏原有的按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>上传文件框</title><style>.file{display:inline-block;position:relative;overflow:hidden;}.file button{border-radius:3px;border:1px solid #ccc;display:block;padding:7px 15px;background-color:#fff;cursor:pointer;outline:none;}.file input[type="file"]{position:absolute;top:-999em;visibility:hidden;}</style>
</head>
<body><input type="file"><input type="file"><script>var inps=document.querySelectorAll('input[type="file"]');inps.forEach(function(inp){var Div=document.createElement('div');Div.className='file';inp.parentNode.insertBefore(Div,inp)var Button=document.createElement('button');Button.innerHTML="上传";Div.appendChild(Button);Button.onclick=function(){inp.click();}})</script>
</body>
</html>

javaScript 美化上传文件框相关推荐

javaScript 美化上传文件框（加预览移除效果）
美化上传文件按钮,并预览预览关键代码 inp.onchange=function(){var reader = new FileReader();reader.onloadend = functio ...
美化上传文件框(上传图片框)
传统的表单控件十分简陋,可以说是很难看,那怎么办? 方法:我们自己做一个好看的样式出来,用各种标签啊,css啊,是可以做到的.如图: 做出这样一个样子应该是很简单的,但是怎么让他具有上传的功能的呢? ...
php文件上传前端页面样式,HTML实现美化上传文件样式
这篇文章介绍的内容是HTML实现美化上传文件i样式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下传统写法上传文件效果如下图所示这个样式调整了很长时间,最后结果都不尽人意. 非 ...
CSS美化上传按钮、checkbox和radio样式
思路: 美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. input[type=file]上传按钮美化代码如下: 样式一: /*a upload * ...
如何用javascript控制上传文件的大小
以下是引用片段: <form name=Myform οnsubmit="return CheckFileSize()"> <input ...
不使用任何框架，手写纯 JavaScript 实现上传本地文件到 ABAP 服务器
这是 Jerry 2021 年的第 69 篇文章,也是汪子熙公众号总共第 346 篇原创文章. 采用 SAP UI5 sap.ui.unified.FileUploader 控件,结合 Gateway ...
javascript --- 文件上传即时预览闭包实现多图片即时预览
使用javascript原生功能实现,点击上传文件,然后再网页上显示出来 1. 初级显示 1.1 准备一个input标签和一个img标签 <input type=file id="fi ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
input美化上传按钮美化
今天工作需求碰到样式改变上传按钮效果: <a href="javascript:;" class="a-upload"><input ty ...

javaScript 美化上传文件框

美化上传文件按钮

隐藏原有的按钮

javaScript 美化上传文件框相关推荐

最新文章

热门文章