上传图片javascript后如何预览？

Question

I have 7 images and I want to be able to preview a file (image) before it is uploaded.我有 7 张图片，我希望能够在上传之前预览文件（图片）。 The preview action should be executed all in the browser without using Ajax to upload the image.预览动作应该全部在浏览器中执行，不使用 Ajax 上传图像。

<img src="1.gif" class="img-fluid">
<img src="2.gif" class="img-fluid">
<img src="3.gif" class="img-fluid">
<div class="col-md-2">
    <input name="image" onchange="previewFile()" type="file" class="d-none">
    <?php if (isset($url)) ?>
        <img src="<?= images/user.png ?>"  id="dialog" class="img-fluid rounded-circle cursor-pointer">
    <?php else ?>
        <img src="<?= images/avatar.png ?>" id="dialog" class="img-fluid cursor-pointer">
    <?php } ?>
</div>
<img src="4.gif" class="img-fluid">
<img src="5.gif" class="img-fluid">
<img src="6.gif" class="img-fluid">

javascript javascript

    function previewFile() {
        var preview = document.querySelector('img');
        var file    = document.querySelector('input[type=file]').files[4];
        var reader  = new FileReader();
        reader.addEventListener("load", function () {
            preview.src = reader.result;
            preview.classList.add("rounded-circle h-25");
        }, false);
        if (file) {
            reader.readAsDataURL(file);
        }
    }

    var imgBtn = document.querySelector('#dialog');
    var fileInp = document.querySelector('[type="file"]');

    imgBtn.addEventListener('click', function() {
        fileInp.click();
    })

How can I do this?我怎样才能做到这一点？

Answer 1

try this code.试试这个代码。 nothing big changes in code some logical issue in the following statement.代码中没有大的变化以下语句中的一些逻辑问题。

var file    = document.querySelector('input[type=file]').files[0];

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input name="image" onchange="previewFile()" type="file" class="d-none">
    <img src=""  id="dialog">
    <script type="text/javascript">
         function previewFile() {
            var preview = document.querySelector('img');
            var file    = document.querySelector('input[type=file]').files[0];
            var reader  = new FileReader();
            reader.addEventListener("load", function () {
                preview.src = reader.result;
                preview.classList.add("rounded-circle h-25");
            }, false);
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
</html>

上传图片javascript后如何预览？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-11 11:33:17

上传图片javascript后如何预览？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-11 11:33:17

解决方案1
1 已采纳 2020-09-11 11:33:17