<!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. android studio使用真机测试时点击Debug调试模式时报Error running app:No target device found，点击运行模式却是启动正常的

    原因是adb没检测到设备(包括真机和虚拟机). 在Terminal执行adb devices命令,查看有没有连接到的设备. 如果没有设备,确认虚拟机是否正确打开,真机是否连接打开USB调试并安装驱动. ...

  2. sqlserver2012 清除日志

    1. backup log wwgl_demo to disk='D:\DATA_BACKUP\2017-07-19.log' 2. 右键数据库-->任务-->收缩-->文件     ...

  3. swift -懒加载创建view

     // 只有外界访问到headerView的时候才会去执行闭包, 然后将闭包的返回值赋值给headerView     // 注意: 一定要记住闭包后面需要写上(), 代表执行闭包     //懒加载 ...

  4. nancy中的本地化

    1 建立一个文件夹 ,名称可以任意 2 添加资源文件 比如 Text.resx 3 使用 <h3>"@Text.Text.Greeting"</h3> 其中 ...

  5. .NET框架源码解读之准备CLR源码阅读环境

    微软发布了CLR 2.0的源码,这个源码是可以直接在freebsd和windows环境下编译及运行的,请在微软shared source cli(http://www.microsoft.com/en ...

  6. unity 加载资源

    Unity3D中的资源的处理种类 Unity中的资源资源的处理种类大致分为:Resources.StreamingAssets.AssetBundle Resources 是作为一个Unity的保留文 ...

  7. WPF绑定BitMapImage

    先说下图片文件存在服务器.wpf常用绑定图片地址没办法用.忽然想到,convert能否转字节数据?实验了下可以. 图片绑定字节数组. convert代码 public class PictureCon ...

  8. 创建可复用的自定义 ASP.NET MVC Helpers

    通常,在ASP.NET MVC项目中App_Code目录下新建.cshtml编写类似下方的代码就能创建自定义的MVC Helper了, 假设文件名为StrHelper.cshtml,那么在别的视图中的 ...

  9. Javascript实例 -- 计时器, 搜索框,selected联动

    计时器: <body> <input type="text" id="i1"> <input type="button& ...

  10. mysql遇到的问题：can't creat/write to file "/var/mysql/xxxx.MYI"

    这个问题困扰了我,可能有两个原因. 1.文件夹权限不够,至少也要给出 USERS 组的可读可写权限: 2.文件夹的磁盘满了,文件写不进去了: 如果是这个不能创建和写的问题,很大的概率就是文件的权限.没 ...