<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .hide{

                display: none !important;

            }

            .fileBox{

                padding: 40px 0 20px 0;

            }

            .fileInfo{

                font-size: 14px;

                margin-bottom: 20px;

            }

            .close{

                width: 20px;

                height: 20px;

                position: absolute;

                right: 10px;

                top: 10px;

                background: url('img/close.svg') no-repeat center center;

                z-index: 99;

            }

            .baseImg{

                width: 200px;

                height: 200px;

                display: inline-block;

                position: absolute;

                top: 0;

                left: 0;

                z-index: -1;

            }

            .inputBox{

                width: 200px;

                height: 200px;

                position: relative;

                margin-bottom: 30px;

                cursor: pointer;

            }

            .fileInput{

                width: 100%;

                height: 100%;

                opacity: 0;

                cursor: pointer;

            }

            .add{

                position: absolute;

                top: 0;

                left: 0;

                z-index: -1;

                width: 100%;

                height: 200px;

                line-height: 200px;

                text-align: center;

                border: 2px solid #9CC7F2;

                font-size: 40px;

                color: #B4B4B4;

            }

        </style>

    </head>

    <body>

        <div class="fileBox">

            <div class="fileInfo">第一张图</div>

            <div class="inputBox">

                <i class="close hide" id="close1"></i>

                <input type="file" name="pic" class="fileInput" id="pic1" accept="image/gif,image/jpg,image/png" onChange="inputChange('pic1','inputImg1','add1','close1')" />

                <img src="" alt="" id="inputImg1" class="baseImg hide"/>

                <div class="add" id="add1">+</div>

            </div>

        </div>

        <script src="js/jquery.min.js"></script>

        <script>

            function inputChange(picId,imgId,addId,closeId){

                var files = document.getElementById(picId).files;

                console.log(files);

                if(files.length == 0) return;

                var form = new FormData(),

                    file = files[0];

                form.append('file', file);

                var reader = new FileReader();

                reader.readAsDataURL(file); //base64

                //接收到图片时触发onload

                reader.onload = function(e){

                    var result = reader.result;

                    console.log(result);

                    document.getElementById(imgId).src = result;

                    document.getElementById(imgId).classList.remove('hide');

                    document.getElementById(addId).classList.add('hide');

                    document.getElementById(closeId).classList.remove('hide');

                };

//                $.ajax({

//                    url: '/upload',

//                    type: 'POST',

//                    cache: false,

//                    data: formData,

//                    processData: false,

//                    contentType: false

//                }).done(function(res) {

//

//                }).fail(function(res) {});

            }

//            document.getElementById('pic1').addEventListener('click', function() { this.value = ''; }, false);

            $(function(){

                $('.close').click(function(){

                    $(this).addClass('hide');

                    $(this).siblings('.add').removeClass('hide');

                    $(this).siblings('img').addClass('hide');

                })

            })

        </script>

    </body>

</html>

效果展示：

上传图片后：

参考文章： https://my.oschina.net/u/2306318/blog/845836

input[type="file"]上传图片并显示图片的更多相关文章

  1. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  2. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  3. 一、H5(移动端)前端使用input type=file 上传图片，调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  4. input[type=file]上传图片及转为base64码以及预览

    <input type="file" id="imgurl" capture="camera" accept="image/ ...

  5. 前端实现input[type='file']上传图片预览效果

    众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...

  6. 关于input type=file上传图片的总结

    最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...

  7. 上传文件 隐藏input type="file",用text显示

    <div> <span>上传文件:</span> <input type="file" id="upload_file" ...

  8. input type = file 上传图片转为base64

    项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...

  9. input[type=file]中使用ajaxSubmit来图片上传

    今天在使用input[type=file]上传图片到服务器时,因为项目要求,并不是像常见的通过按钮来提交表单事件,而是图片上传后就自动执行表单提交事件,将上传的图片信息传给服务器. 刚开始我是这样执行 ...

随机推荐

  1. redis centos 上以 tar.gz 安装redis

    1.下载安装文件#wget http://download.redis.io/releases/redis-3.2.3.tar.gz 2.删除文件 rm -rf /usr/local/redisrm ...

  2. 【分享】Java后台开发精选知识图谱

    地址 引言: 学习一个新的技术时,其实不在于跟着某个教程敲出了几行.几百行代码,这样你最多只能知其然而不知其所以然,进步缓慢且深度有限,最重要的是一开始就对整个学习路线有宏观.简洁的认识,确定大的学习 ...

  3. 字符串匹配的KMP算法（转载）

    字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD" ...

  4. shell 脚本 查看班上同学的网络状态

    #!/bin/base # a=192.168.100. //定义变量 c=('王浩' '谢云生' '黄科杨' '何星宇' '张宸兵' '胡燕' '刘桃') //定义数组 for b in {101. ...

  5. The J-Link hardware debugging Eclipse plug-in

    Quicklinks If you already know what are the features of the new plug-in and just want to know how to ...

  6. 利用反射(Reflection)处理对象

    创建一个学生类: public class Student { public int Id { set; get; } public string Name { set; get; } public ...

  7. tcp udp socket编程

    http://blog.csdn.net/ns_code/article/details/14128987

  8. gitlab中修改项目名称客户端修改方法

    如果gitlab项目名称已经修改,对于本地已经克隆下来的仓库,可以使用如下命令进行修改: git remote set-url origin 新的项目路径

  9. LOJ#3085. 「GXOI / GZOI2019」特技飞行（KDtree+坐标系变换）

    题面 传送门 前置芝士 请确定您会曼哈顿距离和切比雪夫距离之间的转换,以及\(KDtree\)对切比雪夫距离的操作 题解 我们发现\(AB\)和\(C\)没有任何关系,所以关于\(C\)可以直接暴力数 ...

  10. IT男装逼利器：如何像黑客一样聊天 Mojo-Webqq

    电影里的黑客们聊天不想我们生活中的一样,用QQ.微信的客户端,都是通过命令行来进行聊天交流的,大概是为了提升逼格吧.(文末有福利~) 本文作者:KevinSVIP 今天发现一个有趣的项目:使用mojo ...