使用影像選擇器插件上傳多張影像并在asp.net核心中使用ajax發送到控制器？

我使用“spartan-multi-image-picker”插件上傳...

我想將這個插件選擇的影像發送到控制器......

但是只發送一個檔案，不知道問題出在哪里？

我在這個網站上看到了幾乎所有相同的帖子，但沒有幫助！！

此插件創建的 Html 輸入：

<input id="ImageName" class="form-control spartan_image_input" accept="image/*" data-spartanindexinput="0" style="display : none" name="fileUpload[]" type="file">

查詢代碼：

Form_Data.append("ImagesGallery", $('#ImageName')[0].files[0]);

 $.ajax({
    url: '/AdminPanel/Product/AddAndUpdateProduct',
    data: Form_Data,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function (data) {
    //
    }
});

查看型號：

public class AddProductViewModel
{     
    public IEnumerable<IFormFile> ImagesGallery { get; set; }

}

控制器 ：

public IActionResult AddAndUpdateProduct(AddProductViewModel model)
    {
      //
    }

插件代碼：

 var template = `<div hljs-subst">${groupClassName} spartan_item_wrapper" data-spartanindexrow="${count}" style="margin-bottom : 20px;float:right; ">` 
                            `<div style="position: relative;">` 
                                `<div  data-spartanindexloader="${count}" style=" position: absolute; width: 100%; height: ${rowHeight}; background: rgba(255,255,255, 0.7); z-index: 22; text-align: center; align-items: center; margin: auto; justify-content: center; flex-direction: column; display : none; font-size : 1.7em; color: #CECECE">`  
                                    `${uploadLoaderIcon}`  
                                `</div>` 
                                `<label  style="width: 100%; height: ${rowHeight}; border: 2px dashed #ddd; border-radius: 3px; cursor: pointer; text-align: center; overflow: hidden; padding: 5px; margin-top: 5px; margin-bottom : 5px; position : relative; display: flex; align-items: center; margin: auto; justify-content: center; flex-direction: column;">` 
                                    `<a href="javascript:void(0)" data-spartanindexremove="${count}" style="position: absolute !important; right : 3px; top: 3px; display : none; background : #ED3C20; border-radius: 3px; width: 30px; height: 30px; line-height : 30px; text-align: center; text-decoration : none; color : #FFF;" ><i ></i></a>` 
                                    `<img style="width: ${placeholderImageWidth}; margin: 0 auto; vertical-align: middle;" data-spartanindexi="${count}" src="${placeholderImageTarget}"  /> ` 
                                    `<p data-spartanlbldropfile="${count}" style="color : #5FAAE1; display: none; width : auto; ">${dropFileLabel}</p>` 
                                    `<img style="width: 100%; vertical-align: middle; display:none;"  data-spartanindeximage="${count}">` 
                                    `<input id = "ImageName"  accept="image/*" data-spartanindexinput="${count}" style="display : none"  name="${fieldName}" type="file">` 
                               `</label> ` 
                            `</div>` 
                       `</div>`;

你能幫我嗎謝謝

uj5u.com熱心網友回復：

這是一個使用 ajax 將多個檔案傳遞給操作的演示：

看法：

<div class="row">
    <div id="coba1"></div>
</div>
    <button onclick="uploadfiles()">upload</button>
    <script>
    $("#coba1").spartanMultiImagePicker({
            fieldName: 'fileUpload[]'
        });
        function uploadfiles() {
            var Form_Data = new FormData();
            document.getElementsByName("fileUpload[]").forEach((el) => {
                if ($(el)[0].files[0] != undefined)
                Form_Data.append('ImagesGallery', $(el)[0].files[0]);
            }
                
            );
            $.ajax({
                url: 'AddAndUpdateProduct',
                data: Form_Data,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (data) {
                    //
                }
            });
        }
    </script>

行動：

public IActionResult AddAndUpdateProduct(AddProductViewModel model)
        {
            return Ok();
        }

結果：

標籤：查询 阿贾克斯 asp.net核心

上一篇：顯示來自欄位上行內AJAX呼叫的驗證錯誤

下一篇：如何配置.NETCore日志記錄json檔案以忽略某些事件？