我有一个输入类型文件的列表,它仅接受图像..添加一个图像时如何查看图像?

问题描述 投票:0回答:1

我编写了此代码及其工作原理,但是当我选择图像时,所有输入均查看同一图像,而不仅是我将图像添加到..的图像。>>

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

仅不能分开进行每个输入。

[我编写了此代码及其工作原理,但是当我选择图像时,所有输入均查看同一图像,不仅是我将图像添加到..

在...上更改图像
javascript html image input bootstrap-file-input
1个回答
0
投票
单击输入旁边的图像的Just change属性:
© www.soinside.com 2019 - 2024. All rights reserved.