FileReader与URL.createObjectURL实现图片、视频上传预览

这篇具有很好参考价值的文章主要介绍了FileReader与URL.createObjectURL实现图片、视频上传预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

关于FileReader的讲解可以看这里

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

 IE10+

直接上代码:

<!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-FileReader</p>
        <input class="upload" type="file" onchange=onUpload1(this.files[0])>
        <div class="preview preview1"></div>
    </div>

    <div class="section">
        <p>方案2-createObjectURL</p>
        <input class="upload" type="file" onchange=onUpload2(this.files[0])>
        <div class="preview preview2"></div>
    </div>

    <script>
        // 方式一:FileReader
        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);
                }
            }
        }

        // 方式二:createObjectURL(推荐)
        function onUpload2 (file) {
            
            var blob = new Blob([file]), // 文件转化成二进制文件
                url = URL.createObjectURL(blob); //转化成url
            // 或者直接:var url = window.URL.createObjectURL(file);

            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>

一个视频编码成dataUrl放到内存浏览器肯定崩溃,用createObjectURL生成的url应该是指向硬盘中的视频而不用加载到内存文章来源地址https://www.toymoban.com/news/detail-775327.html

到了这里,关于FileReader与URL.createObjectURL实现图片、视频上传预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React antd upload组件上传视频并实现视频预览

    记录问题:antd的upload组件文档中对于视频的上传预览没有明确的文档demo,在这里记录一下 项目需求:支持图片及视频的上传并实现预览,点击上传后不会立即请求接口上传资源,后续点击确定再上传 上代码

    2024年02月04日
    浏览(47)
  • vue+ElementUI实现点击图片预览大图和预览视频

    最近遇到一个需求: 在表格中实现预览图片和查看视频 预览图片功能: 如下,是材料一栏的代码 在 data 中定义: methods 中: style 中: 预览图片的功能就完成了. 接下来是查看视频: 安装 vue-video-player 在 main.js 中: 在写的vue页面中引入: 当时在 main.js 中引入后,发现这个插件没效果,然后

    2023年04月08日
    浏览(51)
  • vue实现预览图片及视频组件

       组件代码内容 MediaViewer.vue 引用  VideoOrImagePreview.vue 使用 注:element-plus,vue3

    2024年02月04日
    浏览(37)
  • 【SpringBoot】-- 实现本地文件/图片上传到服务器生成url地址

            在java项目中你可能会有以下需求:用户上传本地图片,然后展示在网页上。本篇文章将使用阿里云oss实现上传图片到oss,oss生成url。 首先进入阿里云,按如下操作 进入创建页面,修改读写权限为公共读 然后进入bucket,创建AccessKey 创建后,保存好AccessKeyID和Acces

    2024年04月10日
    浏览(47)
  • 【前后端的那些事】15min快速实现图片上传,预览功能(ElementPlus+Springboot)

    前言 :最近写项目,发现了一些很有意思的功能,想写文章,录视频把这些内容记录下。但这些功能太零碎,如果为每个功能都单独搭建一个项目,这明显不合适。于是我想,就搭建一个项目,把那些我想将的小功能全部整合到一起。实现 搭一次环境 ,处处使用。 本文主要

    2024年01月19日
    浏览(46)
  • 7.2 SpringBoot实现上传图片API + url映射本地路径registry.addResourceHandler

    在图书借阅系统里,有很多图片需要前端展示,这些图片大都是由用户上传,保存在服务端,所以服务端需要提供 上传和访问图片 。 基本要求 :前端直接访问网络图片url 就可以打开图片,不用下载,更不用base64转码! 实现方式 : Tomcat

    2024年02月10日
    浏览(45)
  • 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

    控件改造 在窗口的 el-form 控件参数中添加 @paste.native 事件,事件绑定方法名 handlePaste 也可以在其他控件中添加事件监听,看个人需求。 注意: 监听粘贴事件时,需要当前页面先获取焦点,否则无法正常监听, 可以在页面加载后调用 focus() 获取焦点 粘贴功能Js部分参考资料

    2023年04月08日
    浏览(100)
  • 微信小程序---图片裁剪、旋转、预览、上传功能实现(已经封装成组件,需要的到资源下载)

    1、可以拍摄或选择本地图片上传图片数据 2、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小,还可以缩放操作,需要的可以解除限制即可 1、点击图片上传按钮时,跳转页面到cropper进行图片选择剪切 wx.navigateTo({       url: `/pages/cropper/cropper?d

    2023年04月26日
    浏览(77)
  • 前端--文件上传--文件切片--利用FileReader()中的readAsDataURL()做缩略图--多文件上传--formData--切片上传实现

    可以把File 类型 转换为 Blob 类型,因为 File 是Blob的子类 Blob是不可修改也是无法读取里面的内容的。但是Filereader就提供了读取Blob里面内容的方法。 1.做缩略图用readAsDataURL 给图片显示一下 可以利用切片来实现上传半张图片的效果 2. 也可以做文本预览(利用readAsText)方式和上

    2023年04月20日
    浏览(62)
  • 前端FileReader对象实现图片file文件转base64

    1、file转base64具体代码 2、原理解析 ​ 上面封装的方法,其原理主要是借助 FileReader 对象来实现图片格式的转换, FileReader 对象中的 readAsDataURL() 方法,可以读取一个 File 或 Blob 类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过 readAsDataURL() 方法去读

    2023年04月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包