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

I want the button browser inside the loop to be clicked Select an image and display it?

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

如果您想display/preview在页面中选择图片，您可以尝试修改如下代码。

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

测试结果

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

Select multiple images in a loop and display them individually with jQuery

javascript

html

jquery

asp.net-core

c#-4.0