多個圖像文件上傳帶字幕

Question

我設法通過foreach循環獲得標題，但現在我正面臨一個新問題。

由於嵌套循環，我在我的數據庫中得到了重複項，請檢查下面的代碼。

的JavaScript

window.onload = function() { 
    if (window.File && window.FileList && window.FileReader) { 
     var filesInput = document.getElementById("galleryFilesAdd"); 
     filesInput.addEventListener("change", function (event) { 
      var files = event.target.files; //FileList object 
      var output = document.getElementById("result"); 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       if (!file.type.match('image')) 
        continue; 
       var picReader = new FileReader(); 
       picReader.addEventListener("load", function (event) { 
        var picFile = event.target; 
        var div = document.createElement("div"); 
        div.innerHTML = "<img class='thumbnail img-responsive' alt='" + picFile.name + "' + height='220' width='300'; src='" + picFile.result + "'" + 
          "title='" + picFile.name + "'/><button type='button' class='delete btn btn-default' class='remove_pic'> <span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button><input type='text' id ='imagecaption[]' name='imagecaption[]' class='form-control' placeholder='Add Image Caption'>" 
        output.insertBefore(div, null); 
        div.children[1].addEventListener("click", function (event) { 
         div.parentNode.removeChild(div); 
        }); 
       }); 
       //Read the image 
       picReader.readAsDataURL(file); 
      } 
     }); 
    } 
    else { 
     console.log("Your browser does not support File API"); 
    } 
} 

控制器

public async Task<ActionResult> AddHotel(HotelViewModels.AddHotel viewModel, IEnumerable<HttpPostedFileBase> galleryFilesAdd) 
{ 
    try 
    { 
     if (ModelState.IsValid) 
     { 

      foreach (var files in galleryFilesAdd) 
      { 
       var fileName = Guid.NewGuid().ToString("N"); 
       var extension = Path.GetExtension(files.FileName).ToLower(); 
       string thumbpath, imagepath = ""; 
       using (var img = Image.FromStream(files.InputStream)) 
       { 
        foreach (var caption in viewModel.imagecaption) 
        { 
        var galleryImg = new hotel_gallery_image 
        { 
         hotel_id = hotel.id, 
         thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension), 
         imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension), 
         entry_datetime = DateTime.Now, 
         guid = Guid.NewGuid().ToString("N"), 
         enabled = true, 
         image_caption = caption 
        }; 
        db.hotel_gallery_image.Add(galleryImg); 
       } 
      } 
      } 

      await db.SaveChangesAsync(); 
      return RedirectToAction("Index", "Hotel"); 
     } 
    } 
    catch (DbEntityValidationException ex) 
    { 
     string errorMessages = string.Join("; ", ex.EntityValidationErrors.SelectMany(x => x.ValidationErrors).Select(x => x.PropertyName + ": " + x.ErrorMessage)); 
     throw new DbEntityValidationException(errorMessages); 
    } 
    viewModel.Country = await db.countries.ToListAsync(); 
    return View(viewModel); 
} 

和視圖模型

public string[] imagecaption { get; set; } 

插入數據到數據庫

Answer 1

我認爲這個問題是在你的

image_caption = viewModel.imagecaption 

，因爲你通過var files in galleryFilesAdd迭代你viewModel在每次迭代使用參照相同image_caption，所以您需要image_caption取決於過濾另一個數據（文件名或其他數據，你viewmodel包含）。

UPDATE 理想的情況下，如果你在你的視圖模型和文件（文件名舉例）相同的屬性，那麼你可以做這樣的事情thatimage_caption = viewModel.FirstOrDefault(x=>x.Filename == filename).imagecaption

爲了更具體，如果你提供的代碼將是有益的你的Viemodel和galleryFilesAdd類。

更新2

你的情況，第二你的foreach通過整個收集imagecaption陣列的迭代，通過galleryFilesAdd收集每次迭代，這在你的數據庫造成雙數據。 如果你可以把字幕的順序爲1號文件採取從imagecaption數組的第1個要素等等，那麼你可以使用這樣的代碼：

if (ModelState.IsValid) 
     { 
      int index = 0; 
      foreach (var files in galleryFilesAdd) 
      { 
       var fileName = Guid.NewGuid().ToString("N"); 
       var extension = Path.GetExtension(files.FileName).ToLower(); 
       string thumbpath, imagepath = ""; 
       using (var img = Image.FromStream(files.InputStream)) 
       { 
       if(index < viewModel.imagecaption.Length){ 
        var galleryImg = new hotel_gallery_image 
        { 
         hotel_id = hotel.id, 
         thumbPath = String.Format("/Resources/Images/Hotel/GalleryThumb/{0}{1}", fileName, extension), 
         imagePath = String.Format("/Resources/Images/Hotel/Gallery/{0}{1}", fileName, extension), 
         entry_datetime = DateTime.Now, 
         guid = Guid.NewGuid().ToString("N"), 
         enabled = true, 
         image_caption = viewModel.imagecaption[index] 
        }; 
        db.hotel_gallery_image.Add(galleryImg); 
        index++; 
        } 
      } 
      }