FileReader и URL.createObjectURL реализуют предварительный просмотр загрузки изображений и видео.

HTML

Ранее обычно используемым решением для загрузки и предварительного просмотра изображений и видео было сначала загрузить файл на сервер, а после того, как сервер вернет адрес файла, присвоить адресную строку атрибуту src для img или видео, а затем реализовать так называемый предварительный просмотр файла. По сути, это просто «загрузка и последующий предварительный просмотр» файла, что не только тратит время пользователя, но и тратит трафик, который нельзя игнорировать.

Недавно я проверил информацию в Интернете и обнаружил, что на самом деле очень легко добиться «предварительного просмотра перед загрузкой». Существует два метода реализации: FileReader и URL.createObjectURL.

Объяснение о FileReader можно увидетьздесь

Объяснение и применение метода URL.createObjectURL см.здесь

демонстрационный адрес

Перейдите непосредственно к коду:

<!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>

демонстрационный скриншот:

方案1、2 上传图片
Вариант 1, 2 Загрузить фотографии

方案1 上传视频
Вариант 1 Загрузить видео

方案2 上传视频
Вариант 2 Загрузить видео

Видно, что FileReader и URL.createObjectURL прекрасно могут реализовать предпросмотр картинок, но для загрузки видео FileReader не подойдет, и браузер сразу вылетит. . . , но метод URL.createObjectURL работает отлично.

Конкретная разница между ними некоторое время не ясна в Интернете, но в целом создается впечатление, что URL.createObjectURL имеет лучшую производительность, чем FileReader. Если что-то не так, пожалуйста, поправьте меня.

Еще одно кликабельное приложение о URL.createObjectURLНесколько строк кода во внешнем интерфейсе просто реализуют предварительный просмотр кода w3school.

Другие статьи, добро пожаловать на исправлениеДругие статьи

Категории