Функциональность перетаскивания в MVC - PullRequest
Новая
       3

Функциональность перетаскивания в MVC

1 голос
/ 17 июня 2020

В моем приложении MVC я заменил кнопку выбора файла и функцию загрузки функцией перетаскивания в dropzone.

Вот мой javascript

@ {
  var formurl = IGT.baseUrl + "/Items/UploadImageURL"; 
  <script src = "~/Scripts/jquery.filedrop.js" ></script>
  <script type = "text/javascript" src = "~/Scripts/dropzone/dropzone.js" ></script> 
  <script type = "text/javascript" >
    // Disabling autoDiscover, otherwise Dropzone will try to attach twice.
    Dropzone.autoDiscover = false;
    $(function() {
      // Now that the DOM is fully loaded, create the dropzone, and setup the event listeners
      var myDropzoneImages = new Dropzone("#dropImages", {
        url: '@Url.Action("UploadImage")',
      });
      myDropzoneImages.on("addedfile", function(file) {
        /* Maybe display some more file information on your page */
      });
      myDropzoneImages.on("success", function(file) {
        $(".dz-success-mark svg").css("background", "green");
        $(".dz-error-mark").css("display", "none");
      });
      myDropzoneImages.on("error", function(file) {
        $(".dz-error-mark svg").css("background", "red");
        $(".dz-success-mark").css("display", "none");
      });
    })
  </script>
  <link rel = "stylesheet" type = "text/css" href ="~/Content/DropZone.css" >
}

Вот мой код бритвы 

<div class="noprint" style="text-align:center; font-weight:bold; font-size: 20px"> Upload Images:</div>
<form class="noprint dropImages" id="dropImages" method="POST" enctype="multipart/form-data">
   @Html.AntiForgeryToken()
   <input type="hidden" name="id" id="id" value="@Model.ID" />
   <div class="dz-message" data-dz-message><span>Drop images here to upload, or click here to browse for a image</span></div>
</form>

И вот метод публикации, который его обрабатывает 

public ActionResult UploadImage(int ? id) {
  if (id == null)
    return HttpNotFound();
  Item i = db.Items.Find((int) id);
  if (!Directory.Exists(IGT.baseUrl + "/Content/uploads/Item-" + id.ToString()))
    Directory.CreateDirectory(HttpContext.Server.MapPath("~/Content/uploads/Item-" + id.ToString()));
  var fName = "";
  foreach(string fileName in Request.Files) {
    HttpPostedFileBase file = Request.Files[fileName];
    fName = file.FileName;
    if (file != null && file.ContentLength > 0) {
      var image = IGT.contentPath + "\\Items\\";
      if (!System.IO.Directory.Exists(image)) {
        System.IO.Directory.CreateDirectory(image);
      }
      var filename = image + id.ToString() + ".jpg";
      file.SaveAs(filename);
      i.Image_Url = IGT.baseUrl + "/Content/images/Items/" + id.ToString() + ".jpg";
      db.SaveChanges();
    }
  }
  return RedirectToAction("Edit", new {
    id = id
  });
}

Он проходит через метод, как я хочу, но переход по ссылке на изображение после этого дает мне ошибку и дальше моя страница просмотра редактирования У меня есть 

@Html.Raw(Model.imageHtml(640, 480))

, который должен отображать только что загруженное изображение, но вместо этого он возвращает это

Image returned

Любая помощь приветствуется

...