Select 循环中的多个图像并使用 jQuery 单独显示它们

Question

我有 select 图像的循环按钮：

            @foreach (var item in image)
            {
                <label class="control-label col-md-7 ">
                   select image
                </label>
                <img id="imgworksample" src="~/site/imgworksample/@item.imageName" class="img- 
                 thumbnail" />
                <input type="hidden" value="@item.ImageId" />
                <input id="img_worksampleupload" name="imgpostupload" type="file" />
                <hr />
            }

我想点击循环内的按钮浏览器 Select 一个图像并显示它？

jQuery怎么办？

这适用于一个浏览器按钮：

 <script>
    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#imgworksample').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#img_worksampleupload").change(function () {
        readURL(this);
    });
</script>

Answer 1

我想点击循环内的按钮浏览器 Select 一个图像并显示它？

请注意，您将 html 元素放在循环语句中，这将导致id属性的值在当前 HTML 文档中不唯一。

如果您想在页面中显示/预览所选图像，您可以尝试修改如下代码。

@foreach (var item in image)
{
    <label class="control-label col-md-7 ">
        select image
    </label>
    <img src="~/site/imgworksample/@item.imageName" class="imgworksample img-
                 thumbnail" />
    <input type="hidden" value="@item.ImageId" />
    <input class="img_worksampleupload" name="imgpostupload" type="file"/>
    <hr />
} 

jQuery代码

<script>
     function readURL(input, imgcontainer) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(imgcontainer).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".img_worksampleupload").change(function () {
        
        //find target image container and pass it as parameter to custom function
        var target_imgtag = $(this).prev().prev();

        readURL(this, target_imgtag);
    });
</script>

测试结果