<!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. js 右击事件

    $.fn.extend({        "rightclick": function (fn) {            $(this).mousedown(function ( ...

  2. WebAPI请求(转)

    出处:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...

  3. win2003 ent 64 + mssql ent 64

    1.打win2003补丁(取消IE8.0)2.msconfig->boot.int->高级中,将内核改成83.将cd1,cd2,高到Servers,Tools目录中,并保证Servers, ...

  4. 20155316 2016-2017-2 《Java程序设计》第6周学习总结

    教材学习内容总结 IO操作的目标 从数据源当中读取数据,以及将数据写入到数据目的地当中: I/O的来源地与目的地多种多样 I/O的流向:输入流.输出流.参照物 IO的分类方法 输入流\输出流: 字节流 ...

  5. PHP（九）数组（2）

  6. .NET基础 （08）字符串处理

    字符串处理1 System.String是值类型还是引用类型2 StringBuilder类型有何作用3 如何在String和Byte[]对象之间进行转换4 简述BASE64编码的作用以及C#中对其的 ...

  7. loadrunner - 安装与破解

    最近准备学习LR,借助这个平台,将自己的学习经历记录下来,当然很多都不是原创,都是遇到问题时各种百度,然后梳理下知识是为了避免以后遇到同样的错误时,能回过头来参考参考. 下面的是转载某位大神的博客,尊 ...

  8. Lucene 分页搜索实现

    Lucene中有两种分页查询方式 1.一次查询出大量数据,然后根据页码定位是哪个文档,其实就是暴力获取了 2.通过调用searchAfter来实现 我们都知道collect是lucene中对搜索到的文 ...

  9. 原创：MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 2、数据框架 和 功能预览

    说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...

  10. Maven Compilation error [package org.testng.annotations does not exist]

    背景 在执行mvn test的时候,提示package org.testng.annotations does not exist 解决办法 Open pom.xml file. Go to &quo ...