Dropzone拖拽上传图片

Dropzone 拖拽上传图片

欢迎大家一起来讨论技术

---

注意：使用这个控件,是先请求后台方法，如果你页面还有保存按钮，那就需要你想办法了，有很多种方式事实上也不难

---

控件效果

引用 JS css
这是作者本人所用dropzone.js包!
https://download.csdn.net/download/liyonghewangtao/10647161

<link href="~/Scripts/dropzone/dropzone.css" rel="stylesheet" />
<script src="~/Scripts/dropzone/dropzone.min.js"></script>

前台HtML

 <div id="mydropzone" class="dropzone"></div>


<script>
       var myDropzone = new Dropzone("div#mydropzone", {
            url: "/Patrols/BatchUpload",
            paramName: "file",
            maxFilesize: 50, // MB
            maxFiles: 15, //上传图片数量
            acceptedFiles: ".jpg,.png,.gif",
            addRemoveLinks: true,    //是否显示移除按钮
            uploadMultiple: true,    //是否允许多个文件上传
            dictFileTooBig: '文件过大',
            dictRemoveFile: '移除图片',
            autoProcessQueue:  true,    //时候自动处理文件上传
            dictDefaultMessage: '请选择要上传的照片',
           success: function (file, data) {
               console.log(file + "s" + data);
            var str=$("#images").val();
               str += data.result+ "," ;
              $("#images").val(str);

    }

       });

</script>

后台保存

 [DisableAbpAntiForgeryTokenValidation]
        public JsonResult BatchUpload()
        {
            bool isSavedSuccessfully = true;
            int count = 0;
            string msg = "";

            string fileName = "";
            string fileExtension = "";
            string filePath = "";
            string fileNewName = "";

            string directoryPath = Server.MapPath("/images/");


            try
            {

                if (!Directory.Exists(directoryPath))
                    Directory.CreateDirectory(directoryPath);
                foreach (string f in Request.Files)
                {
                    HttpPostedFileBase file = Request.Files[f];//获取上传的文件

                    if (file != null && file.ContentLength > 0)
                    {
                        fileName = file.FileName;
                        fileExtension = Path.GetExtension(fileName);
                        fileNewName = Guid.NewGuid().ToString() + fileExtension;
                        filePath = Path.Combine(directoryPath, fileNewName);
                        file.SaveAs(filePath);
                        count++;
                    }
                }
            }
            catch (Exception ex)
            {
                msg = ex.Message;
                isSavedSuccessfully = false;
            }
            return Json(filePath);
            //return Json(new
            //{
            //    Result = isSavedSuccessfully,
            //    Count = count,
            //    Message = msg
            //});
        }

如果您写出来的程序存在问题 ，欢迎您在下方留言，一起讨论

下载作者所用dropzone.js包
https://download.csdn.net/download/liyonghewangtao/10647161