C# + jQuery 实现拖拽上传图片功能，后端base64转存图片

项目场景：

上传图片功能：添加可拖拽上传图片功能

---

解决方案：

监听拖拽的图片

document.addEventListener("drop", function (e) { //拖离

     e.preventDefault();

})

document.addEventListener("dragleave", function (e) { //拖后放

     e.preventDefault();

})

document.addEventListener("dragenter", function (e) { //拖进

     e.preventDefault();

})

document.addEventListener("dragover", function (e) { //拖来拖去

     e.preventDefault();

})

绘制拖拽区域：

var box = document.getElementById('myAwesomeDropzone'); //拖拽区域

box.addEventListener("drop", function (e) {

      var fileList = e.dataTransfer.files; //获取文件对象

           //检测是否是拖拽文件到页面的操作

           if(fileList.length == 0){

               return false;

          }

           //拖拉图片到浏览器，可以实现预览功能

          //规定视频格式

          Array.prototype.S=String.fromCharCode(2);

          Array.prototype.in_array=function(e){

              var r=new RegExp(this.S+e+this.S);

               return (r.test(this.S+this.join(this.S)+this.S));

          };

      var fileType = fileList[0].name.split('.')[1];

      if (fileType != 'jpg' && fileType != 'png' && fileType != 'jpeg') {

            $.message({

                    message: '@Localizer["Please select"]',

                     type: 'warning'

           });

           return false;

      }

      //创建一个url连接,供src属性引用

      var fileurl = window.URL.createObjectURL(fileList[0]);

      resultfile = fileList[0];

      let reader = new FileReader() //新建一个FileReader对象

      reader.readAsDataURL(resultfile) //将读取的文件转换成base64格式

      var imgbase64 = "";

      reader.onload = function(e) {

             //将img标签的src换成base64格式，并显示出来

             imgbase64 = e.target.result;

             $.ajax({

                       type: "POST",

                       url: '@Url.Action("UploadImg", "Message")',

                      data: { addImage: imgbase64 },

                      dataType: 'json',

                       success: function (data, status) {

                                        if (data.state == 1) {

                                                  $("#upload_i").css("display", "none");

                                                  $("#pic_h3").css("display", "none");

                                                 $("#modalAddPic .imgurl").data("imgurl", data.data);

                                                  $("#modalAddPic .imgurl").attr("src", data.data);

                                        }

                      }

               });

      }

},false);

前端实现大概就是这个样子，相信你们可以看懂这个代码，嘿嘿嘿

下面是后端上传图片代码

#region 拖拽上传图片素材

public JsonResult UploadImg(string addImage)

{

         var taskID = Guid.NewGuid();

         var Name = taskID.ToString();

         var path = hostingEnvironment.WebRootPath + "/fileUpload/pictureLibrary/" + Name;

         string filename = "";//声明一个string类型的相对路径

         //取图片的后缀格式

         string hz = addImage.Split(',')[0].Split(';')[0].Split('/')[1];

         Name = Name + "." + hz;

         string[] str = addImage.Split(','); //base64Str为base64完整的字符串，先处理一下得到我们所需要的字符串

         byte[] imageBytes = Convert.FromBase64String(str[1]);

         //读入MemoryStream对象

         MemoryStream memoryStream = new MemoryStream(imageBytes, 0, imageBytes.Length);

         memoryStream.Write(imageBytes, 0, imageBytes.Length);

         filename = path+"." + hz;//所要保存的相对路径及名字

         var libraryPath = hostingEnvironment.WebRootPath + "/fileUpload/pictureLibrary/";

         if (!Directory.Exists(libraryPath))

         {

         Directory.CreateDirectory(libraryPath);

         }

         // 转成图片

         Image image = Image.FromStream(memoryStream);

         // 图片名称

         image.Save(filename); // 将图片存到本地Server.MapPath("pic\\") + iname + "." + hz

         var data = "/fileUpload/pictureLibrary/" + Name;

         return Json(new { state = 1, data });

}

#endregion

好了 整体代码大概就是这个样子，大家有什么不懂的可以留言哦