如何為串列的每個元素使用檔案選項，并使用jQuery將其值傳遞給控制器

我處于使用 Jquery 的初學者水平。

問題：所以問題是，我必須為標簽內的每個元素添加“選擇檔案”。并在標簽內選擇后顯示影像。但是這是用于每個回圈的元素串列，它不能在 id 屬性之間有所不同。請查看圖片和代碼以供參考并幫助我，謝謝！

[.cshtml]
@if (Model.DailyMenuProducts != null && Model.DailyMenuProducts.Count > 0)
{
@for (int i = 0; i < Model.DailyMenuProducts.Count; i  )
{
 <li class="list-group-item">
    <input asp-for="@Model.DailyMenuProducts[i].IsChecked" type="checkbox" />
    <label asp-for="@Model.DailyMenuProducts[i].ProductId">  @Model.DailyMenuProducts[i].ProductName</label>
    <input type="hidden" asp-for="@Model.DailyMenuProducts[i].ProductId"/>
    <input type="hidden" asp-for="@Model.DailyMenuProducts[i].ProductName" asp-route-productId/>
        <div  class="uploadFile float-end">
            <label for="productImage">
                <img id="imageViewer" width="50" height="50" style="border: 1px solid #000000; cursor:pointer;" />
            </label>
            <input asp-for="@Model.DailyMenuProducts[i].ProductImage" asp-for-ProductId="@Model.DailyMenuProducts[i].ProductId" type="file" id="productImage" style="display:none; visibility:none" onchange="getImage(this.value);"/>
         </div>
</li>
}

[.js]

$(".uploadFile").on('change', function () {
        console.log('new file uploaded')
        //var array = $("#productImage").getIdArray();
        var file_data = $("#productImage").prop("files")[0];
        var files = event.target.files
        $("#imageViewer").attr("src", window.URL.createObjectURL(files[0]));
        var form_data = new FormData();
        var product_Id = (this.ProductId) ;
        var viewModel = { ProductId: product_Id, ProductImage: file_data};
        form_data.append("file", file_data);
        $.ajax({
            url: "/DailyMenuPlanner/AddPhoto",
            cache: false,
            contentType: false,
            processData: false,
            data: viewModel,
            type: 'post',
            success: function (result) {
                if (result.success == true) { alert("success!"); }
                else { alert("fail!"); }
            }
        });
        
    });

uj5u.com熱心網友回復：

HTML id 屬性應該是唯一的。在您的代碼中，只有第一個元素id=productImage被替換。

你可以做的是使用$(this).find(selector). 這將找到當前元素內的元素。

在下面的代碼中，當前元素是.uploadFile并且.find()將在該元素內搜索。

$(".uploadFile").on("change", function () {
   var file_data = $(this).find("#productImage").prop("files")[0];
   ...
   $(this).find("#imageViewer").attr("src", window.URL.createObjectURL(files[0]));
   ...
}

如果上面的代碼不起作用，只需將id替換為classes即可；

<img class="imageViewer" width="50" height="50" style="border: 1px solid #000000; cursor:pointer;" />
<input class="productImage" asp-for="@Model.DailyMenuProducts[i].ProductImage" asp-for-ProductId="@Model.DailyMenuProducts[i].ProductId" type="file" style="display:none; visibility:none" onchange="getImage(this.value);"/>

然后在您的腳本中，使用類名而不是 id；

$(".uploadFile").on("change", function () {
   var file_data = $(this).find(".productImage").prop("files")[0];
   ...
   $(this).find(".imageViewer").attr("src", window.URL.createObjectURL(files[0]));
   ...
}

如果您想使用您的標簽作為檔案輸入，您可以向您的標簽添加一個點擊事件，觸發點擊您的輸入欄位。

// add file-label to your class
<label class="file-label"></label>

// add this script to your js file
$(".file-label").click(function(){
   var parent = $(this).parent();
   var target = $(parent).find(".productImage");
   $(target).click();
});

標籤：javascript html jQuery asp.net-mvc asp.net 核心

上一篇：重新排列div-將每個div放在每個影像下(javascript-jQuery)

下一篇：如何將JQuery插入的輸入值帶到同一個jQuery中？