美化上传文件框(上传图片框)
2024-04-08 06:15:34
传统的表单控件十分简陋，可以说是很难看，那怎么办？
方法:我们自己做一个好看的样式出来，用各种标签啊，css啊，是可以做到的。如图:
做出这样一个样子应该是很简单的，但是怎么让他具有上传的功能的呢？
那就使用代理的方法，点击上传就等于点击<input type="file">(上传文件表单控件)
废话不多说，直接上代码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试插件</title>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<style>
body{font-family:"微软雅黑";font-size:14px;}
.wrapper{width:800px;margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<br><br>
<h1 align="center">上传图片预览</h1>
<br><br>
<div class="wrapper">
<input type="file">
</div>
<script src="js/upload.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试插件</title>
<link rel="stylesheet" type="text/css" href="css/upload.css">
<style>
body{font-family:"微软雅黑";font-size:14px;}
.wrapper{width:800px;margin-right:auto;margin-left:auto;}
</style>
</head>
<body>
<br><br>
<h1 align="center">上传图片预览</h1>
<br><br>
<div class="wrapper">
<input type="file">
</div>
<script src="js/upload.js"></script>
</body>
</html>
css:
.file{
margin: 0;
padding: 0;
position:relative;
display:inline-block;
margin:0 10px;
vertical-align:top;}
margin: 0;
padding: 0;
position:relative;
display:inline-block;
margin:0 10px;
vertical-align:top;}
.file img{
margin: 0;
padding: 0;
display:block;
margin-bottom:4%;
border-radius:4px;
border: none;
}
.file button{
margin: 0;
padding: 0;
border:0 none;
width:48%;
line-height:30px;
color:#fff;
border-radius:4px;
cursor:pointer;
outline:0 none;
font-family:inherit;
}
.file button.upload{
background-color:#0f73da;
}
.file button.remove{
background-color:#aaaaaa;
margin-left: 2%;
}
.file input[type="file"]{
position:absolute;
top:-999em;
visibility:hidden;
}
margin: 0;
padding: 0;
display:block;
margin-bottom:4%;
border-radius:4px;
border: none;
}
.file button{
margin: 0;
padding: 0;
border:0 none;
width:48%;
line-height:30px;
color:#fff;
border-radius:4px;
cursor:pointer;
outline:0 none;
font-family:inherit;
}
.file button.upload{
background-color:#0f73da;
}
.file button.remove{
background-color:#aaaaaa;
margin-left: 2%;
}
.file input[type="file"]{
position:absolute;
top:-999em;
visibility:hidden;
}
js:
//init
function initFile(fo){
var divFile = document.createElement("div");
divFile.className="file";
fo.parentNode.insertBefore(divFile,fo);
divFile.appendChild(fo);
var btnRemove = document.createElement("button");
btnRemove.className="remove";
btnRemove.innerHTML="移除";
divFile.insertBefore(btnRemove,fo);
var btnUpload = document.createElement("button");
btnUpload.className="upload";
btnUpload.innerHTML="上传";
divFile.insertBefore(btnUpload,btnRemove);
var showImgTar = document.createElement("img");
showImgTar.setAttribute('src','images/nophoto.gif');
showImgTar.setAttribute('width','150');
showImgTar.setAttribute('height','150');
divFile.insertBefore(showImgTar,btnUpload);
}
var inputFiles = document.querySelectorAll("input[type='file']");
inputFiles.forEach(function(inf){
initFile(inf);
})
//file onload
var upload = document.querySelectorAll(".upload");
var file = document.querySelectorAll(".file");
file.forEach(function(f){
var showImg = f.querySelector("img");
var defImgSrc = "images/nophoto.gif";
var inpFile = f.querySelector("input[type='file']");
//移除
f.querySelector(".remove").onclick = function(){
showImg.src=defImgSrc;
inpFile.value="";
}
//上传
f.querySelector(".upload").onclick = function(){
f.querySelector("input[type='file']").click();
}
inpFile.onchange = function(){
//判断文件类型
//console.dir(this.value);
var fileName = this.files[0].name;
var fileExt = fileName.split(".").pop().toLowerCase();
if(fileExt!='jpg' && fileExt!= 'gif' && fileExt!= 'png'){
alert("请上传jpg,gif,png图片");
this.value="";
return;
}
//判断文件大小
var fileSize = 1024 * 1024 * 2;
if(this.files[0].size>=fileSize){
alert("图片大于2M,请重新选择");
this.value="";
return;
}
//创建fileReader对象
var reader = new FileReader();
//图片编码完成
reader.onloadend = function(e){
showImg.src = e.target.result;
}
//解析图片 成base 64位的图片 用fileReader的readAsDataURL 去读本地图片对象
reader.readAsDataURL(this.files[0]);
}
})
function initFile(fo){
var divFile = document.createElement("div");
divFile.className="file";
fo.parentNode.insertBefore(divFile,fo);
divFile.appendChild(fo);
var btnRemove = document.createElement("button");
btnRemove.className="remove";
btnRemove.innerHTML="移除";
divFile.insertBefore(btnRemove,fo);
var btnUpload = document.createElement("button");
btnUpload.className="upload";
btnUpload.innerHTML="上传";
divFile.insertBefore(btnUpload,btnRemove);
var showImgTar = document.createElement("img");
showImgTar.setAttribute('src','images/nophoto.gif');
showImgTar.setAttribute('width','150');
showImgTar.setAttribute('height','150');
divFile.insertBefore(showImgTar,btnUpload);
}
var inputFiles = document.querySelectorAll("input[type='file']");
inputFiles.forEach(function(inf){
initFile(inf);
})
//file onload
var upload = document.querySelectorAll(".upload");
var file = document.querySelectorAll(".file");
file.forEach(function(f){
var showImg = f.querySelector("img");
var defImgSrc = "images/nophoto.gif";
var inpFile = f.querySelector("input[type='file']");
//移除
f.querySelector(".remove").onclick = function(){
showImg.src=defImgSrc;
inpFile.value="";
}
//上传
f.querySelector(".upload").onclick = function(){
f.querySelector("input[type='file']").click();
}
inpFile.onchange = function(){
//判断文件类型
//console.dir(this.value);
var fileName = this.files[0].name;
var fileExt = fileName.split(".").pop().toLowerCase();
if(fileExt!='jpg' && fileExt!= 'gif' && fileExt!= 'png'){
alert("请上传jpg,gif,png图片");
this.value="";
return;
}
//判断文件大小
var fileSize = 1024 * 1024 * 2;
if(this.files[0].size>=fileSize){
alert("图片大于2M,请重新选择");
this.value="";
return;
}
//创建fileReader对象
var reader = new FileReader();
//图片编码完成
reader.onloadend = function(e){
showImg.src = e.target.result;
}
//解析图片 成base 64位的图片 用fileReader的readAsDataURL 去读本地图片对象
reader.readAsDataURL(this.files[0]);
}
})
代码复制了就可以直接运行了。
这里给大家解释下思路:
当你点击了上传按钮时，执行f.querySelector("input[type='file']").click();，让表单控件也点击。
然后选择图片(因为这里的样式时上传图片的样子，其实删掉一些代码也可以上传别的东东)，
选择后代码执行了inpFile.onchange = function()这个函数，将图片传进来，判断文件类型，判断文件大小
将图片解析成base 64位的图片，然后就可以将结果放在页面上预览了。
这样表现和行为都有了， 既漂亮又有用。
而init()方法就是初始化input表单，让光头司令<input type="file">最终变成了下面的代码:
<div class="file">
<img src="data:images/nophoto.gif" width="150" height="150">
<button class="upload">上传</button>
<button class="remove">移除</button>
<input type="file">
</div>
从而来美化上传框
sad
美化上传文件框(上传图片框)相关推荐
- javaScript 美化上传文件框（加预览移除效果）
美化上传文件按钮,并预览 预览关键代码 inp.onchange=function(){var reader = new FileReader();reader.onloadend = functio ...
- javaScript 美化上传文件框
美化上传文件按钮 隐藏原有的按钮 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- 【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面，也没有报错，数据库中也传入了值，可是eclipse中webapp下怎样都无法生存目录。
在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...
- php文件上传前端页面样式,HTML实现美化上传文件样式
这篇文章介绍的内容是HTML实现美化上传文件i样式 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 传统写法 上传文件 效果如下图所示 这个样式调整了很长时间,最后结果都不尽人意. 非 ...
- chrome浏览器上传文件延迟_UEditor chrome 点击上传文件选择框会延迟几秒才会显示...
一.概述: 关于UEditor在谷歌浏览Chrome打开选择指上传图片,发现[点击选择图片]时无法立即弹出选择框,而是等4-7秒钟才显示出来的BUG,试了N多方法,改层级都用了,也无效.在网上找到了一 ...
- 微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了 接下来我们看看如何实现的吧 上传图片功能 效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
- java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
- CSS美化上传按钮、checkbox和radio样式
思路: 美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. input[type=file]上传按钮美化 代码如下: 样式一: /*a upload * ...
- JMeter之HTTP请求上传文件/上传图片
Jmeter实现接口上传图片 一.Fiddler抓包上传图片接口 查看WebForms,接口传参为空,文件/图片传参为<file>对用的Name值: Content-Disposition ...
最新文章
- Oracle10g 管理系统全局区(SGA)
- 在Eclipse上安装插件springsource-tool-suite详解，完美不报错！以及yml无自动提示？
- 不用 H5，闲鱼 Flutter 如何玩转小游戏？
- LeetCode 1004.最长连续1的个数
- RTCStartupDemo：一款极其简单的 WebRTC 入门项目
- npm ERR! the command again as root/Administrator
- springboot项目jar冲突问题解决
- ubuntu搭建Kubernetes集群(ansible，kubedam，rancher)
- php 下载的官方扩展 没有configure文件解决办法
- web安全day13：简单深透测试流程
- 解决VS2019配置QT6.1.1出现大量错误信息
- Win7系统开机动画设置
- Flutter 图片透明度(光暗程度)
- AI算力基础 -- TPU1.0
- 使用Fiddler监控雷电/夜神模拟器浏览网页:安全警告:该网站的安全证书有问题.解决方案!
- 微信卡包跳转小程序实现及解决
- java代码自动回复_17.10.18 Java实现公众号关注自动回复图文
- 用户画像原理、技术选型及架构实现
- Be An Effective Engineer
- springboot 实现redis高并发抢票服务