jQuery的拖拽上传文件操作及图片预览

jQuery的拖拽上传文件操作及图片预览

---

---

前言

今天遇到一个比较简单的问题，如何拖拽上传文件，然而就是一个简单的问题困扰了我整整一天，下面就是解决办法

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、拖拽上传到服务器

一种方法是通过ajax获取方法，然而我没有学过ajax所以想到另一种办法，废话不说，直接放代码。

// 拖拽上传
  $("#file-main").on({
    //拖进触发的事件
    "dragenter": function (e) {
      //清除浏览器默认的功能
      e.preventDefault();
      console.log("有东西在拖动")
    },
     //在目标地点拖动触发的事件
    "dragover": function (e) {
      //清除浏览器默认的功能
      e.preventDefault();
      console.log("文件进来了")
    },
    //在目标地点放置后出发的事件
    "drop": function (e) {
      //清除浏览器默认的功能
      e.preventDefault();
      //获取文件的信息，可自行输出查看
      let file = e.originalEvent.dataTransfer.files;
      console.log(file);
      //将获取的文件信息替换到input的自带属性的files中
      $("#file").prop("files",file)
    }
  })

这里的想法就是将input的files属性替换成我要上传的文件，然后点击提交就能提交到服务器上

二、添加预览图片功能

这里我们需要用到一个内置库FileReader,如果要了解的话点击这里

let file = e.originalEvent.dataTransfer.files;
       //创建FileReader对象
       var reader = new FileReader();
       //调用方法,将上面获取的文件信息传入，这个方法会生成base64的格式，其他方法自行查阅
       reader.readAsDataURL(file);
       //调用开始运行的方法
       //e.target.result就会获取到生成的base64的格式
      //传入img的src属性
       reader.onload = function (e) {
         // $("#img")=e.target.result;
         $("#img").prop("src",e.target.result);
       };