我有一个输入类型文件列表，它只接受图像。我如何在添加图像时查看图像？

Question

我编写了这段代码及其工作原理，但是当我选择图像时，所有输入都看到相同的图像，而不仅仅是我将图像添加到的图像..

<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>

只是不能分别为每个输入制作它。

Answer 1

只需更改单击输入旁边的图像属性：

$(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>

我有一个输入类型文件列表，它只接受图像。我如何在添加图像时查看图像？

I have a list of inputs type file and it accept image only .. How can i view an image when i add one?

html

javascript

image

input

bootstrap-file-input