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

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

0 голосов
/ 03 марта 2019

Итак, я работаю над сайтом для клиента.Область, в которой я нуждаюсь, - это область загрузки и предварительного просмотра фотографий.Фотографии не нужно передавать в этом процессе, это просто для загрузки и предварительного просмотра по сравнению с примером - для стоматологической клиники.

Есть 5 примеров фотографий и 5 разделов загрузки, где они будут просматривать фотографию рядом с примером.

Код, который я использую: 

<style>
    /* Image Designing Propoerties */
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<script type="text/javascript">
    /* The uploader form */
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#yourImage').attr('src', e.target.result);
    };

</script>


<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=247 width=330>

Итак, вот кикер.Когда я использую этот код для одного блока кода (построенного на платформе Squarespace), он без проблем загрузит и отобразит фотографию для этого блока.

Когда я добавляю его в другие области, назначение загрузки либо меняется на другую область, либо, настраивая его, я получаю два блока для отображения одного и того же изображения, но я не уверен, как его написать, чтобы каждыйБлок отображает свое собственное изображение, и я не уверен, что мне не хватает идентификатора или SRC, что могло бы вызвать это.

При необходимости я с удовольствием вышлю ссылку и пароль сайта для дальнейшего изучения.Заранее спасибо, впервые пользуясь помощью чата помощи stackoverflow.

1 Ответ

0 голосов
/ 03 марта 2019

Я только что создал function readurl(a), которому передаю параметр a.Этот параметр сообщит функции о id из input и id о img, где мы хотим просмотреть изображение.Потому что идентификаторы всех elements в html должны быть разными.

HTML & JS Code 

function readurl(a) 
{
    input=document.getElementById('input'+a);
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) 
        {
            document.getElementById('blah'+a).src=e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="new_img_container" >
        <label id="file">Upload image
        <input onchange="readurl(1)" id="input1" name="product_img" type="file" name="image" size="60" required>
        </label>
        <br>
        <img id="blah1" src="../images/product_image.png" alt="product_image" >
    </div>
    <br><br>
    <div class="new_img_container" >
        <label id="file">Upload image
        <input onchange="readurl(2)" id="input2" name="product_img" type="file" name="image" size="60" required>
        </label>
        <br>
        <img id="blah2" src="../images/product_image.png" alt="product_image" >
    </div>
</body>
</html>

Я не добавил CSS для стилей.

...