在我们写网页的时候,有很多各种各样的上传图片的样式,但是input 的 type="file" 的样式是不可被更改的。

其实我们要的只是input的点击,清楚这点就行了。

CSS部分

body{
margin:;
}
html,body{
height: 100%;
}
#box{
width: 100%;
height: auto;
}
.img-d{
margin-top: 30px;
width: 300px;
height: 300px;
text-align: center;
position: relative;
}
.img-d span{
display: inline-block;
width: 100%;
height: 100%;
background-image: url("jia.jpg");
cursor: pointer;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#up{
display: none;
}
.rems{
display: inline-block;
width: 25px;
height: 25px;
background: red;
border-radius: 50% 50%;
font-size: 17px;
position: absolute;
top: -6px;
right: -6px;
color: white;
text-align: center;
line-height: 25px;
cursor: pointer;
}

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="box">
<div class="img-d">
<span class="up-s"></span>
<input type="file" id="up" multiple name="files">
</div>
</div>
</body>
</html>
<script src="index.js"></script>

JS部分

// span的点击事件
var addBtn = document.querySelector('.up-s');
addBtn.addEventListener('click',function () {
document.querySelector('#up').value = null;
document.querySelector('#up').click();
return false;
},false); // 处理input点击之后的change事件
document.getElementById("up").addEventListener("change",function(e){
var files =this.files;
var reader =new FileReader();
reader.readAsDataURL(files[0]);
reader.onload =function(e){
var dx =(e.total/1024)/1024;
if(dx>=2){
alert("文件大小大于2M");
return;
}
var result =this.result;//这里就是转化之后的DataURL
addBtn.style.backgroundImage = "url("+result+")";
}
var rem =document.createElement("i");
rem.setAttribute("class","rems");
rem.innerHTML ="x";
document.querySelector(".img-d").appendChild(rem);
rem.addEventListener('click',function () {
this.style.display ="none";
addBtn.style.backgroundImage = "url(jia.jpg)";
});
})

原理:把<input type="file" id="up" multiple name="files"> 给隐藏掉,然后自己写一个标签,自定义css样式,在js里,点击这个元素然后执行点击input的事件。在操作input的change事件就行了。

input自定义样式上传图片的更多相关文章

  1. Ueditor上传图片后自定义样式类名

    Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...

  2. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  3. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  4. palacehoder的自定义样式【输入框input /文本域textarea】

    7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和texta ...

  5. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  6. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  7. input[type="radio"]自定义样式

    input为radio时,虽然会有默认选中的样式,但是并不符合大多数项目的需求,我们的目标是可以随心所欲自定义它的样式.怎么做呢?其实很简单,只要抓住3点.分别是1.label 2.隐藏自带样式 3. ...

  8. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  9. input range样式更改,模拟滑块

    input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...

随机推荐

  1. canvas+js绘制折线图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. sqlalchemy的外键与relationship查询

    https://www.cnblogs.com/goldsunshine/p/9269880.html 讲的很详细. http://www.bjhee.com/flask-ext4.html 思诚之道 ...

  3. Linux下ls命令使用详解(转)

    说明:我们在linux下使用ll时,其实就是ls -l.ls才是最终的命令程序. ls命令是linux下最常用的命令之一,ls跟dos下的dir命令是一样的都是用来列出目录下的文件,List即列表的意 ...

  4. Mac下的浏览器类似Windows中Ctrl+F5的不请求缓存刷新页面的快捷键

    正常方式: [shitf]+[command]+[r] 如果改过快捷键的: [fn]+[shift]+[command]+[f]

  5. phpqrcode实现二维码(含图片)

    ---恢复内容开始--- 1,http://phpqrcode.sourceforge.net/ 下载 2,解压以后只需要一个文件 3,原生php测试: <?php include 'phpqr ...

  6. tp5 数据库相关操作笔记

    这里如何连接多个数据库? 1,在conif.php文件中添加一个数据库配置(把database.php文件内容复制一份过来),这里取名为db2 2,在控制器的方法中使用 mysql中的参数绑定 mys ...

  7. 安装TD出现Unknown user name or bad password问题

    在Server 2003 sp2上安装TD8.0 出现Unknown user name or bad password,是因为2003启用了DEP保护.  关闭系统的DEP保护就可以了.  方法如下 ...

  8. ClouderManager集群在Linux里浏览器默认是英文,在Win里浏览器是中文,怎么更改?(图文详解)

    不多说,直接上干货! 问题详情 在这里面如何英文改中文的吗? 莫非要把linux的语言环境给改了?? 我找找网页的语言字体怎么更改下 找到对应页面,修改成中文 解决办法 刷新下,即可 欢迎大家,加入我 ...

  9. 修复PHP支持的标准JSON数据格式

    PHP的json_decode无法解析的JSON数据,代码如下: $json = "{rst:5,c:[ [1018485,2,0,0,0,0,'','0-0','','',2,0,2],[ ...

  10. 【扫盲】】32位和64位Windows的区别

    用户购买windows安装盘或者重新安装操作系统的时候,通常会遇到这个问题,就是不知道该如何选择使用32位操作系统和64位操作系统,有人说64位系统速度快,其实理论上确实是这样,不过具体还要根据你的个 ...