Javascript:: 图像预览答案

【问题标题】：Javascript:: Image previewsJavascript:: 图像预览
【发布时间】：2020-05-01 23:00:21
【问题描述】：

我想在上传到我的 laravel 应用程序之前预览 4 张图片。当我上传第一张图片时，我可以看到第一张预览图像。

但如果我上传第二张图片，第一张预览图片会变为第二张图片。但是我在第二个预览字段中看不到第二张图片预览。

第三张和第四张图片也发生了同样的事情。只有第一个预览字段会发生变化。

如何显示 4 个图像预览？

html

<div class="image-preview" id="imagePreview">
            @if(isset($post))
            <img src="" id="image-preview__image">
            @else
            <img src="../../blog-image/S__3530766.jpg" id="preview">
            @endif
        </div>

        <input type="text" class="name" value="NAME">

        <textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>



        <div class="preview">
                    <input type="file" id="file" accept="image/*" name="profile_img">
            <label for="file" >
                Add profile photo
            </label>
        </div>

<div class="content-image-preview" id="imagePreview">
            @if(isset($post))
            <img src="" id="image-preview__image">
            @else
            <img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview2">
            @endif
        </div>

        <div class="preview" id="add">
                <input type="file" id="file" accept="image/*" name="image">
            <label for="file">
                Add photo
            </label>
        </div>
<input type="text" value="TITLE" class="section-title">

    <div class="content-image-preview" id="imagePreview">
        @if(isset($post))
        <img src="" id="image-preview__image">
        @else
        <img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview3">
        @endif
    </div>

    <div class="preview" id="add">
                <input type="file" id="file" accept="image/*" name="image">
        <label for="file">
            Add photo
        </label>
    </div>
 <div class="content-image-preview" id="imagePreview">
        @if(isset($post))
        <img src="" id="image-preview__image">
        @else
        <img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview4">
        @endif
    </div>

    <div class="preview" id="add">
                <input type="file" id="file" accept="image/*" name="image">
        <label for="file">
            Add photo
        </label>
    </div>

javascript

const input = document.getElementById("file");
const previewImage = document.getElementById("image-preview__image");

input.addEventListener('change', function(e){
    const file = this.files[0];
    if (previewImage != null && previewImage.length < 1){


    for (var i=0; i<previewImage.length; i+=1){
        if(file) {
            const reader = new FileReader();

            reader.addEventListener("load", function(){
                previewImage.setAttribute("src", this.result);
            });

            previewImage.style.display = "block";

            reader.readAsDataURL(file);
        } else {
            previewImage.setAttribute("src", "");
        }
    }
   }
  }
);

【问题讨论】：

我认为您需要随时提出问题
你有多个 img 元素具有相同的 id image-preview__image ~ 这将不起作用
对不起，我想说，“如果我的问题不清楚，请随时提出额外的解释。”
我认为@YotamDahan 的意思是你实际上并没有问过问题
@RamRaider 好的！

标签： javascript html laravel image input

【解决方案1】：

您有多个具有相同 ID image-preview__image 的 IMG 元素。为每个元素使用不同的 ID，然后它将起作用。

<input type="file" id="file" accept="image/*" name="image">

多个地方的名字不能相同。

【讨论】：

我将每个 id 名称重命名为 image-preview__image、image-preview__image1、image-preview__image2 和 image-preview__image3，我在我的 javascript 代码中更改了贵重物品，但它不起作用。
name ="image" 在多个地方不能相同。

【解决方案2】：

为了访问正确的预览元素，在这种情况下，您需要一种可靠的方法来进一步查询 DOM 中的元素 - 由于 HTML 不是恒定的，我稍微修改了您的原始元素，以便使用 section 分隔不同的不同部分标签 - 从而允许简单的 DOM 遍历找到正确的预览 img 标签。在下文中，您会注意到我省略了您使用的模板标签

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Image previews</title>
    </head>
    <body>
        <form method='post'>

            <!--
                slightly modified and without templating tags, otherwise essentially the same. ID attributes replaced with class attributes
            -->

            <section>
                <div class="image-preview" id="imagePreview">
                    <img class="image-preview__image">
                </div>
                <input type="text" class="name" value="NAME">
                <textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
                <div class="preview">
                    <input type="file" id="file" accept="image/*" name="profile_img">
                    <label for="file" >Add profile photo</label>
                </div>
            </section>



            <section>
                <div class="content-image-preview" id="imagePreview">
                    <img class="image-preview__image">
                </div>
                <div class="preview" id="add">
                    <input type="file" id="file" accept="image/*" name="image">
                    <label for="file">Add photo</label>
                </div>
            </section>



            <section>
                <input type="text" value="TITLE" class="section-title">
                <div class="content-image-preview" id="imagePreview">
                    <img class="image-preview__image">
                </div>
                <div class="preview" id="add">
                    <input type="file" id="file" accept="image/*" name="image">
                    <label for="file">Add photo</label>
                </div>
            </section>



            <section>
                <div class="content-image-preview" id="imagePreview">
                    <img class="image-preview__image">
                </div>
                <div class="preview" id="add">
                    <input type="file" id="file" accept="image/*" name="image">
                    <label for="file">Add photo </label>
                </div>
            </section>


        </form>


        <script>
            const findsection=function(n){
                while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
                return n;
            };

            Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
                input.addEventListener('change',function(e){
                    let section=findsection( e.target );
                    let file=this.files[0];
                    let reader = new FileReader();
                        reader.addEventListener('load', function(){
                            let img=section.querySelector( 'img.image-preview__image' );
                                img.src=this.result;
                                img.width=200;
                        });
                    reader.readAsDataURL(file);
                })
            })
        </script>

    </body>
</html>

const findsection=function(n){
	while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
	return n;
};

Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
	input.addEventListener('change',function(e){
		let section=findsection( e.target );
		let file=this.files[0];
		let reader = new FileReader();
			reader.addEventListener('load', function(){
				let img=section.querySelector( 'img.image-preview__image' );
					img.src=this.result;
					img.width=200;
			});
		reader.readAsDataURL(file);
	})
})

<section>
	<div class="image-preview" id="imagePreview">
		<img class="image-preview__image">
	</div>
	<input type="text" class="name" value="NAME">
	<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
	<div class="preview">
		<input type="file" id="file" accept="image/*" name="profile_img">
		<label for="file" >Add profile photo</label>
	</div>
</section>
<section>
	<div class="content-image-preview" id="imagePreview">
		<img class="image-preview__image">
	</div>
	<div class="preview" id="add">
		<input type="file" id="file" accept="image/*" name="image">
		<label for="file">Add photo</label>
	</div>
</section>
<section>
	<input type="text" value="TITLE" class="section-title">
	<div class="content-image-preview" id="imagePreview">
		<img class="image-preview__image">
	</div>
	<div class="preview" id="add">
		<input type="file" id="file" accept="image/*" name="image">
		<label for="file">Add photo</label>
	</div>
</section>
<section>
	<div class="content-image-preview" id="imagePreview">
		<img class="image-preview__image">
	</div>
	<div class="preview" id="add">
		<input type="file" id="file" accept="image/*" name="image">
		<label for="file">Add photo </label>
	</div>
</section>

【讨论】：

对不起，我试过了，但我有一个错误，Uncaught TypeError: Cannot set property 'src' of null.
您能否通过转换为 class 属性来确认您更改了重复的 ID 属性？