在我们写网页的时候，有很多各种各样的上传图片的样式，但是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. Maven 问题笔记汇总

    Web项目通过Maven部署到Tomcat的错误. Maven环境下面多项目之间的引用 Maven 远程仓库下载慢的的解决方案 Intellij IDEA 像eclipse那样给maven添加依赖 I ...

  2. Xamarin Mono For Android 4.6.07004看不到新建android

    有很多朋友安装了Xamarin Mono For Android 4.6.07004看不到新建android项目 PS 官方安装包有BUG,在某些情况下可能会出现丢失VS插件的情况 (遇到此BUG请下 ...

  3. Javascript框架设计思路图

    这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创!!! 一.简介: 1.市面上主流的JS框架,大多数是由一个个模块组合而成,模块化是大多数让软件所遵循的 ...

  4. Ubuntu14.04下Ambari安装搭建部署大数据集群（图文分五大步详解）（博主强烈推荐）

    不多说,直接上干货! 写在前面的话 (1) 最近一段时间,因担任我团队实验室的大数据环境集群真实物理机器工作,至此,本人秉持负责.认真和细心的态度,先分别在虚拟机上模拟搭建ambari(基于CentO ...

  5. java线程状态 以及 sheep（）、wait()、yield() 区别

    前言 最近看到很多人都在讨论多线程的问题,于是写出了这篇博客,希望可以帮到正在学习和使用这块的朋友们,首先我们先看看两个图(两个图都来自其他码农的分享)   这两个图是一样的逻辑,这里一起罗列出来,下 ...

  6. python-Lock进程同步解决互斥

    #!/usr/bin/python from multiprocessing import Process,Lock import time,sys def A(lock): with lock: f ...

  7. 微服务Kong（四）——添加插件

    在本节中,您将学习到,如何配置使用KONG的插件来管理您的API.KONG的核心原则之一就是通过插件来实现API的扩展.插件可以使您更为简单的扩展和管理您的API. 在以下的步骤中,您将通过配置key ...

  8. applets

    Java Applet 可以大大提高Web页面的交互能力和动态执行能力.包含Applet的网页被称为Java-powered页,可以称其为Java支持的网页. Applet 当用户访问这样的网页时,A ...

  9. 理解Python语言里的异常(Exception)

    Exception is as a sort of structured "super go to".异常是一种结构化的"超级goto". 作为一个数十年如一日 ...

  10. Linux shell ${}简单用法

    转自:Linux shell ${}简单用法 为了完整起见,我这里再用一些例子加以说明 ${ } 的一些特异功能:假设我们定义了一个变量为:file=/dir1/dir2/dir3/my.file.t ...