众所周知JavaScript在设计上处于安全角度考虑，是不允许读写本地文件的（原因请自行百度）；

但是在实际项目应用中，经常会使用到上传图片，并且可以让用户直接预览图片。对于此种做法有两种方法可以实现：一是前后台交互，后台将图片地址返回前端；

二是，我今天写的内容，使用FileReader对象——允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容；此种方法可以优化图片加载速度，减少方法一占用带宽的问题；

但是，此种方法兼容性存在问题，主要是IE浏览器（ie10以上没问题），本文不在讨论兼容性问题，代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <style type="text/css">

            #preview {

                display: inline-block;

                width: 2.56rem;

                height: 2.56rem;

                position: relative;

                background-image: url(img/iconfont-tianjia.png);

                background-repeat: no-repeat;

                background-size: cover;

            }

            #file {

                width: 100%;

                height: 100%;

                opacity: 0;

                position: absolute;

                left: 0;

                top: 0;

                cursor: pointer;

                z-index: 5;

            }

        </style>

    </head>

    <body>

        <div id="preview">

            <input type="file" accept="image/*" id="file" value="" />

        </div>

        <script type="text/javascript">

            var preview = document.querySelector('#preview');

            var eleFile = document.querySelector('#file');

            eleFile.addEventListener('change', function() {

                var file = this.files[0];

                // 确认选择的文件是图片

                if(file.type.indexOf("image") == 0) {

                    var reader = new FileReader();

                    reader.readAsDataURL(file);

                    reader.onload = function(e) {

                        // 图片base64化

                        var newUrl = this.result;

                        preview.style.backgroundImage = 'url(' + newUrl + ')';

                    };

                }

            });

        </script>

    </body>

</html>

直接复用测试即可，FileReader对象是通过将图片url转换成base64格式，然后显示出来。

前端实现input[type='file']上传图片预览效果的更多相关文章

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

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

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

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

  3. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

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

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

  5. input file上传图片预览，非插件

    Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...

  6. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

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

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

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

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

随机推荐

  1. EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图

    使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了. 刚刚开始很混乱,等加载完成后,就好了. 参考这篇文章http://blog.csdn.net/zheng0518/arti ...

  2. 洛谷——P2657 低头一族

    https://www.luogu.org/problem/show?pid=2657 题目描述 一群青年人排成一队,用手机互相聊天. 每个人的手机有一个信号接收指标,第i个人的接收指标设为v[i]. ...

  3. 【C++ Primer每日刷】之三 标准库 string 类型

    标准库 string 类型 string 类型支持长度可变的字符串.C++ 标准库将负责管理与存储字符相关的内存,以及提供各种实用的操作.标准库string 类型的目的就是满足对字符串的一般应用. 与 ...

  4. 0x28 IDA*

    一个早上做完了我真牛B 就是A*用于DFS啊,现在我才发现迭代加深真是个好东西. poj3460 %了%了我们的目标是把它的顺序变对,那么第i个位置的值+1是要等于第i+1个位置的值的.对于一个操作, ...

  5. qq邮箱的SMTP服务器是什么

    qq邮箱的SMTP服务器是什么 QQ邮箱POP3 和 SMTP 服务器地址设置如下:POP3服务器地址为“pop.qq.com”,SMTP服务器地址为“smtp.qq.com”注:1.SMTP服务器需 ...

  6. kaggle 中使用ipython

    # pandas import pandas as pd from pandas import Series,DataFrame # numpy, matplotlib, seaborn import ...

  7. Oracle DBA优化数据库性能心得

    如今的优化己经向优化等待(waits)转型了,实际中性能优化最根本的出现点也都集中在IO,这是影响性能最主要的方面,由系统中的等待去发现Oracle库中的不足.操作系统某些资源利用的不合理是一个比较好 ...

  8. Api接口服务的设计和安全解决方案

    这个涉及到两个方面问题:一个是接口访问认证问题,主要解决谁可以使用接口(用户登录验证.来路验证)一个是数据数据传输安全,主要解决接口数据被监听(HTTPS安全传输.敏感内容加密.数字签名) 普通网站应 ...

  9. 服务端 | Nodejs 学习笔记（一）

    Node.js 前言: 2009年面世 nodejs.org 官网 https://www.npmjs.com/ 模块社区 github.com 仓库 stackoverflow.com  问答社区 ...

  10. React实现单例组件

    问题背景 在工作中遇到了这样一个场景,写了个通用的弹窗组件,却在同一个页面中多次使用了该组件.当点击打开弹窗时,可想而知,一次性打开了多个弹窗,而业务需求只需要打开一个. 我个人在解决问题过程中的一些 ...