上传图片javascript后如何预览？答案

【问题标题】：how to preview after upload image javascript?上传图片javascript后如何预览？
【发布时间】：2020-09-11 19:33:17
【问题描述】：

我有 7 张图片，我希望能够在上传之前预览文件（图片）。预览动作应全部在浏览器中执行，不使用 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

    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();
    })

我该怎么做？

【问题讨论】：

这是重复的stackoverflow.com/questions/4459379/…
我想在点击索引 3 时点击打开对话框

标签： javascript html

【解决方案1】：

试试这个代码。代码没有大的变化，下面的语句有一些逻辑问题。

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>

【讨论】：

我有多个图像。是索引 3