<!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. 数据挖掘分类算法之决策树（zz）

    决策树(Decision tree) 决策树是以实例为基础的归纳学习算法.     它从一组无次序.无规则的元组中推理出决策树表示形式的分类规则.它采用自顶向下的递归方式,在决策树的内部结点进行属性值 ...

  2. span和input同一行布局的时候，高度偏移解决方案

    input标签或收盘标签 添加代码: vertical-align:top;

  3. （转）centos liveCD liveDVD netinstall minimal DVD1 DVD2 版本区别

    LiveCD 和 LiveDVD 是可以直接光盘运行系统,但不能安装,两者差别在于容量大小,dvd包含的软件要多一些. netinstall 是用于网络安装和系统救援的镜像文件. minimal 这个 ...

  4. 如何打开Tango的ADF文件？

    3ds max? opengl? ... Excel? vs? UltraEdit OpenGL Android API ADF文件数据结构:链接

  5. Linux 基础教程 34-软件包管理-RPM

        对于Linux而言管理各类软件,如安装.卸载和升级等是常有的事情和必备的技能.以CentOS为例,常用的安装包命令有rpm和yum. RPM基础     RPM(RedHat Package ...

  6. （DP）uva 10036 Problem C: Divisibility

    链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88171#problem/F 代码: #include <cstdio> ...

  7. [转]WCF Data Services OData

    http://martinwilley.com/net/data/wcfds.html WCF Data Services About OData Server code Client For .ne ...

  8. MFC中的乱起八糟----字符编码：LPTSTR，LPCTSTR， TCHAR等

    注意,编写有 Unicode 意识的代码总是一件好事,比如: CString graycat = CString(_T("Gray")) + _T("Cat") ...

  9. deepin jdk 安装

    一.安装JDK环境 1 .卸载系统自带的Openjdk(可能不需要) 先用检测是否安装了openjdk dpkg -l | grep openjdk 如果安装了, 使用下面命令卸载. sudo apt ...

  10. sharepoint excute power shell

    Add-PSSnapin microsoft.sharepoint.powershell$UPA = Get-SPServiceApplication | ? {$_.typeName -like ' ...