带字幕的多个图像文件上传

Posted 2023-02-22

【中文标题】带字幕的多个图像文件上传

【英文标题】：Multiple Image File Upload with Captions

【发布时间】：2016-02-08 23:31:51

【问题描述】：

我设法通过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/01", fileName, extension),
                        imagePath = String.Format("/Resources/Images/Hotel/Gallery/01", 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; 

将数据插入数据库

【问题讨论】：

有什么帮助吗？谢谢

【参考方案1】：

我认为问题出在你的

image_caption = viewModel.imagecaption

因为您遍历var files in galleryFilesAdd，所以您在每次迭代时使用来自viewModel 的相同image_caption 的引用，因此您需要根据其他数据（文件名或您@987654326 的其他数据）过滤您的image_caption @ 包含）。

更新 理想情况下，如果您的 ViewModel 和文件（例如文件名）具有相同的属性，那么您可以执行类似 thatimage_caption = viewModel.FirstOrDefault(x=>x.Filename == filename).imagecaption

的操作

如果您为 Viemodel 和 galleryFilesAdd 类提供代码，则更具体会有所帮助。

更新 2

在您的情况下，第二次 foreach 遍历 imagecaption 数组的 whole 集合，每次遍历 galleryFilesAdd 集合时，这会导致数据库中出现双重数据。 如果您可以为第一个文件按顺序获取标题，则从 imagecaption 数组中获取第一个元素，依此类推，那么您可以使用如下代码：

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/01", fileName, extension),
                        imagePath = String.Format("/Resources/Images/Hotel/Gallery/01", 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++;
                   
            
          

【讨论】：

嗨，我如何根据上传的文件过滤图片标题？

我尝试将我的图片说明设为私有字符串 [] 图片说明，然后使用 foreach 循环更新图片说明