У меня есть список типов файлов ввода, и он принимает только изображение. Как я могу просмотреть изображение, когда я его добавлю? - PullRequest
Новая
       43

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

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

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

<html lang="en">
<head>
    <title>Change image on select new image from file input</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li>
            <input type="file" name="file" class="profile-img">
            <img src="" class="profile-img-tag" width="200px" />
        </li>
        <li>
            <input type="file" name="file" class="profile-img">
            <img src="" class="profile-img-tag" width="200px" />
        </li>
        <li>
            <input type="file" name="file" class="profile-img">
            <img src="" class="profile-img-tag" width="200px" />
        </li>
    </ul>

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-img-tag').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(".profile-img").change(function(){
        readURL(this);
    });
</script>


</body>
</html>

Просто не могу сделать это для каждого ввода отдельно.

1 Ответ

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

Просто измените атрибут изображения, который находится рядом с нажатым вводом: 

$(input).next().attr('src', e.target.result);


<html lang="en">
<head>
<title>Change image on select new image from file input</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<ul>
    <li>
        <input type="file" name="file" class="profile-img">
        <img src="" class="profile-img-tag" width="200px" />
    </li>
    <li>
        <input type="file" name="file" class="profile-img">
        <img src="" class="profile-img-tag" width="200px" />
    </li>
    <li>
        <input type="file" name="file" class="profile-img">
        <img src="" class="profile-img-tag" width="200px" />
    </li>
</ul>

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(input).next().attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$(".profile-img").change(function(){
    readURL(this);
});
</script>


</body>
</html>
...