MVC中的拖放功能

时间:2020-06-17 14:54:35

标签: javascript c# jquery asp.net-mvc razor

在我的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>

这是处理它的post方法

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

任何帮助将不胜感激

0 个答案:

没有答案
相关问题