之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给img或video的src属性，这才实现所谓的文件预览。实际上这只是文件“上传后再预览”，这既浪费了用户的时间，也浪费了不可轻视的流量。

最近上网查资料才知道其实可以很轻松地实现“上传前预览”。实现方法有两种：FileReader和URL.createObjectURL。

关于FileReader的讲解可以看这里

关于URL.createObjectURL方法的讲解和应用可以看这里

demo地址

直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>preview</title>

    <style>

        * {

            box-sizing: border-box;

        }

        .section {

            margin: 20px auto;

            width: 500px;

            border: 1px solid #666;

            text-align: center;

        }

        .preview {

            width: 100%;

            margin-top: 10px;

            padding: 10px;

            min-height: 100px;

            background-color: #999;

        }

        .preview img,

        .preview video {

            width: 100%;

        }

    </style>

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

</head>

<body>

    <div class="section">

        <p>方案1</p>

        <input class="upload" type="file" onchange=onUpload1(this.files[0])>

        <div class="preview preview1"></div>

    </div>

    <div class="section">

        <p>方案2</p>

        <input class="upload" type="file" onchange=onUpload2(this.files[0])>

        <div class="preview preview2"></div>

    </div>

    <script>

        function onUpload1 (file) {

            var fr = new FileReader();

            fr.readAsDataURL(file);  // 将文件读取为Data URL

            fr.onload = function(e) {

                var result = e.target.result;

                if (/image/g.test(file.type)) {

                    var img = $('<img src="' + result + '">');

                    $('.preview1').html('').append(img);

                } else if (/video/g.test(file.type)) {

                    var vidoe = $('<video controls src="' + result + '">');

                    $('.preview1').html('').append(vidoe);

                }

            }

        }

        function onUpload2 (file) {

            var blob = new Blob([file]), // 文件转化成二进制文件

                url = URL.createObjectURL(blob); //转化成url

            if (/image/g.test(file.type)) {

                var img = $('<img src="' + url + '">');

                img[0].onload = function(e) {

                    URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象

                }

                $('.preview2').html('').append(img);

            } else if (/video/g.test(file.type)) {

                var video = $('<video controls src="' + url + '">');

                $('.preview2').html('').append(video);

                video[0].onload = function(e) {

                    URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象

                }

            }

        }

    </script>

</body>

</html>复制代码

demo截图：

方案1、2 上传图片

方案1 上传视频

方案2 上传视频

可以看出FileReader和URL.createObjectURL都能完美的实现图片的预览，但对于视频的上传，FileReader就不行了，浏览器立马崩溃了。。。，然而URL.createObjectURL方法却完美实现。

关于二者的具体区别在网上一时没查清楚，但总体感觉URL.createObjectURL比FileReader性能更好一些。有什么说错的地方还望指正。

FileReader与URL.createObjectURL实现图片、视频上传前预览的更多相关文章

  1. JavaScript 图片的上传前预览（兼容所有浏览器）

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

随机推荐

  1. MySQL记录操作(多表查询)

    准备 建表与数据准备 #建表 create table department( id int, name varchar(20) ); create table employee( id int pr ...

  2. 部署nginx后无法访问数据库,查看www-error.log日志报错Class 'mysqli' not found in /usr/local/nginx/html/mysql.php on line 2

    检查你的php-mysql包是否安装 [root@localhost nginx]# rpm -qa php-mysql 没有任何输出则没有安装,接下来用yum安装php-mysql yum -y i ...

  3. 测试必知必会系列- Linux常用命令 - cd

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 如何进 ...

  4. （转）C代码优化方案

    C代码优化方案 原文地址:http://www.uml.org.cn/c++/200811103.asp 目录 C代码优化方案 1.选择合适的算法和数据结构 2.使用尽量小的数据类型 3.减少运算的强 ...

  5. 基于 Roslyn 实现一个简单的条件解析引擎

    基于 Roslyn 实现一个简单的条件解析引擎 Intro 最近在做一个勋章的服务,我们想定义一些勋章的获取条件,满足条件之后就给用户颁发一个勋章,定义条件的时候会定义需要哪些参数,参数的类型,获取勋 ...

  6. C语言-转义字符

    %d   十进制有符号整数 %u   十进制无符号整数 %f    浮点数 %s   字符串 %c   单个字符 %p   指针的值 %e   指数形式的浮点数 %X   无符号以十六进制表示的整数 ...

  7. linux 执行计划任务crontab

    crontab 一些常用的命令 service crond start //启动服务 service crond stop //关闭服务 service crond restart //重启服务 se ...

  8. JDBC工具类实现登陆验证-Java(新手)

    JDBC工具类: package cn.chuang.JdbcDome; import java.sql.*; public class JdbcUtilss { private static fin ...

  9. 我成功攻击了Tomcat服务器之后

    Tomcat是一个开源的轻量级Web应用服务器,在我们平常工作过程中接触得非常多.代码也非常经典,很多人为了提升自己的技术也会去阅读学习Tomcat的源码.但正如著名诗人李白所说的:世界上本没有漏洞, ...

  10. swagger 报 i.s.m.parameters.AbstractSerializableParameter - Illegal DefaultValue null for parameter type integer java.lang.NumberFormatException: For input string

    解决 方法 添加这两个依赖....别问我有啥子用....我也不知道..能解决问题 <dependency> <groupId>io.swagger</groupId> ...