<!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. Webservice初级问题： FAILED TO READ WSDL document

    这个问题是说明,这个版本的没法下载 犯错的图样 处理方法一: 将网页上xml文档下载,保存在本地,然后错误提示的这几行删除,保存文档,然后从本地调用 (1)右键另存为 保存为文件名a.xml (2)打 ...

  2. C++中static修饰的静态成员函数、静态数据成员

    1.静态成员函数.静态数据成员 在类中,用static修饰的成员函数被称为静态成员函数,而用static修饰的数据成员就称为静态数据成员:与普通的成员函数和数据成员不同, 静态成员函数和静态数据成员有 ...

  3. word 2007 写CSDN博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  4. 苹果禁用UUID了，咋办？

    By now you have probably heard that Apple is deprecating support for attaining a UDID from an iOS de ...

  5. xib下这种方式创建cell

      这种方法在iOS5.0之前是不能够创建成功的.   MEConvertListTableViewCell *cell = [tableView dequeueReusableCellWithIde ...

  6. RSA加密解密总结

    简单的控制台程序 #include"stdafx.h" #include <math.h> #include<string.h> /*/求解密密钥d的函数( ...

  7. weevely入手使用笔记

    -前言 weevely是一款使用python编写的webshell工具,集webshell生成和连接于一身,采用c/s模式构建,可以算作是linux下的一款php菜刀替代工具,具有很好的隐蔽性(生成随 ...

  8. Android-SDCardUtil-工具类

    SDCardUtil-工具类,是专门处理,外置存储Sdcard的操作 package common.library.utils; import android.annotation.SuppressL ...

  9. c3p0--常见异常

    获取资源timeout: 异常信息如下: Caused by: java.sql.SQLException: An attempt by a client to checkout a Connecti ...

  10. EAS.Net 在程序里配置组件

    public class BeforStart { /// <summary> /// 程序配置初始化 /// </summary> public static void EA ...