前端本地文件上传预览 (拖拽，表格上传的三种方法)

系列文章目录

Tips：我又来写文章了！！！
背景：跟同事讨论，前端向后端发送文件的具体交互。突然想到了一个业务场景（下面按照上传图片并在前端预览为例子说明）
1.如何选择文件
2.如何获取到上传的文件info
3.如何把文件进行转化
4.如何展示图片

---

---

补充

提示：可以看👇的内容（感觉没懂）

1.文件预览&&文件拖拽

1.文件预览&&文件拖拽
2.表单数据上传（三种方法）

2.表单数据上传（三种方法）

---

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

一、如何实现上传文件？

1.使用标签 input：

  <input type="file" />

2.效果图：

二、获取到上传的文件info

1.获取Dom节点

代码如下：

 var file = document.getElementsByTagName("input")[0];

2.绑定事件

代码如下：

 file.onchange = function (event) {
      //   console.log(event.target.files[0]);

      //读取我们本地上传的文件
      var readFile = new FileReader();
      //文件处理方法
      readFile.onload = function (eve) {
        // console.log(eve.target.result);
        //创建 img 标签
        let img = document.createElement("img");
        //设置图片的src属性
        img.setAttribute("src", `${eve.target.result}`);
        //在指定的标签中添加
        document.body.appendChild(img);
      };
      
      readFile.readAsDataURL(event.target.files[0]);
    };

说明图如下：

---

in show & 🔗

以上步骤已经对我们的需求，上传文件并预览进行了实现，如果想要去实现长传至服务器，请点击下面👇链接

1.文件预览&&文件拖拽
2.表单数据上传（三种方法）

---