Javascript:: 图像预览

Posted

技术标签:

【中文标题】Javascript:: 图像预览【英文标题】：Javascript:: Image previews 【发布时间】：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 好的！ 【参考方案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 属性？

以上是关于Javascript:: 图像预览的主要内容，如果未能解决你的问题，请参考以下文章

javascript 上传前预览图像

javascript - 有没有办法在不刷新页面的情况下在 div 上上传和预览图像（替换背景图像）？

带有预览和删除选项的图像上传 - Javascript / Jquery

在 Spring MVC 中使用 JavaScript 上传图像以进行预览

如何使用javascript在表单中调整多个图像大小、预览和上传

带预览和删除、Jquery 和 Javascript 的多张图片上传