前端本地文件操作与上传2

前端无法像原生APP一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：

1. 通过input type=”file” 选择本地文件
2. 通过拖拽的方式把文件拖过来
3. 在编辑框里面复制粘贴

如果是通过第二种拖拽的方式，应该怎么读取文件呢？如下html（样式略）：

<div class="img-container">

    drop your image here

</div>

这将在页面显示一个框：

然后监听它的拖拽事件：

$(".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);

})

数据在drop事件的event.dataTransfer.files里面，拿到这个File对象之后就可以和输入框进行一样的操作了，即使用FileReader读取，或者是新建一个空的formData，然后把它append到formData里面。

第三种见下篇

赏

谢谢你请我吃糖果

微信