前端的文件上传

前端如何上传文件

前言： 前端无法直接操作本地文件，所以需要用户触发。常见的触发方式有三种

一.通过<input type="file" >选择文件

  <div>
    <input type="file" >
  </div>

    let file = document.querySelector('input')
    file.addEventListener('change', function (e) {
      console.log(e.target.files)
      // 创建一个formData对象 后期通过ajax上传到服务器
      const formData = new FormData()
      formData.append("iFile", this.files[0])

      // ajax上传到服务器
    })

如果需要的是图片的地址

1)比较麻烦 麻烦的点在判断图片类型 可以直接在<input type="file" accept="image/*">的时候对文件类型进行要求就行了

    // 后面再次获取到这个formData文件，就可以得到formData对象的myFilename文件
    let file = formData.get('iFile')
    // 这个file文件 如果是图片的话 需要在前端显示。但是file文件是二进制的。没法直接查看，需要进一步转换，这个可以通过FileReader对象就可以做到。
    // 通过实例化一个FileReader,调它的readAsDataURL并把File对象传给他，监听他的onload事件，load完读取的结果就在他的result属性里。他是一个base64格式的，可以直接赋值给一个img的src

    let reader = new FileReader()
    let fileType = file.type;

    // reader读取完成
    reader.onload = function (e) {
      if (/^image\/[ijpe|png|gif]/.test(fileType)) {
        let img = document.createElement('img')
        img.src = e.target.result
        document.body.appendChild(img) //将图片插入body中
      }
    }

    // 调用reader进行读取
    reader.readAsDataURL(file)
    

2)比较方便 直接在input里设置图片的类型 <input type="file" accept="image/*">

     let file  = document.querySelector('input');
     file.addEventListener('change', function () {
     let reader = new FileReader();
     reader.readAsDataURL(this.files[0]);
     reader.addEventListener('load', function () {
     let img = document.createElement('img');
        img.src = this.result;
        document.body.appendChild(img);
       })
    })

二.文件拖拽的方式

    $(".img-container").on("dragover", function (event) {
    event.preventDefault();
}).on("drop", function(event) {
    event.preventDefault();
    // ***数据在event的dataTransfer对象里
    let file = event.originalEvent.dataTransfer.files[0];

    // 然后就可以使用FileReader进行操作
    fileReader.readAsDataURL(file);

    // 或者是添加到一个FormData
    let formData = new FormData();
    formData.append("fileContent", file);
})

三.在编辑框里复制粘贴

// ***粘贴的数据是在event.clipboardData.files里面：
$("#editor").on("paste", function(event) {
    let file = event.originalEvent.clipboardData.files[0];
});

其实就是需要什么创建什么 不过属性不一样 事件也不同 先创建，再赋予事件，给回去 多敲几次就好了

参考地址：www.zhihu.com/search?type…