Javascript :: Предварительный просмотр изображений - PullRequest
Новая
       1

Javascript :: Предварительный просмотр изображений

0 голосов
/ 15 января 2020

Я хочу просмотреть 4 изображения, прежде чем загружать их в свое приложение laravel. Я вижу первое изображение предварительного просмотра, когда я загружаю первое изображение.

Но если я загружу второе изображение, первое изображение предварительного просмотра изменится на второе изображение. Но я не вижу второй предварительный просмотр изображения во втором поле предварительного просмотра.

То же самое происходит с третьим и четвертым изображением. Изменяется только первое поле предварительного просмотра.

Как показать 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", "");
        }
    }
   }
  }
);

Ответы [ 2 ]

1 голос
/ 15 января 2020

Для того, чтобы получить доступ к правильному элементу предварительного просмотра, вам нужен надежный способ запрашивать элементы дальше по 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>
0 голосов
/ 15 января 2020

у вас есть несколько IMG элементов с одинаковым идентификатором image-preview__image . У пользователя разные ID для каждого элемента, тогда он будет работать. 

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

далее имя не может быть одинаковым в нескольких местах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...