前端本地文件操作与上传

前端无法像原生app一样直接操作本地文件，否则的话打开个网页就能把用户电脑上的文件偷光了，所以需要通过用户触发，用户可通过以下三种方式操作触发：
通过input type=”file” 选择本地文件
通过拖拽的方式把文件拖过来
在编辑框里面复制粘贴
第一种是最常用的手段，通常还会自定义一个按钮，然后盖在它上面，因为type=”file”的input不好改变样式。如下代码写一个选择控件，并放在form里面：
<form>
<input type="file" id="file-input" name="filecontent">
</form>
然后就可以用formdata获取整个表单的内容：
$("#file-input").on("change", function() {
console.log(`file name is ${this.value}`);
let formdata = new formdata(this.form);
formdata.append("filename", this.value);
console.log(formdata);
});
把input的value和formdata打印出来是这样的：
可以看到文件的路径是一个假的路径，也就是说在浏览器无法获取到文件的真实存放位置。同时formdata打印出来是一个空的objet，但并不是说它的内容是空的，只是它对前端开发人员是透明的，无法查看、修改、删除里面的内容，只能append添加字段。
formdata无法得到文件的内容，而使用filereader可以读取整个文件的内容。用户选择文件之后，input.files就可以得到用户选中的文件，如下代码：
$("#file-input").on("change", function() {
let filereader = new filereader(),
filetype = this.files[0].type;
filereader.onload = function() {
if (/^image/.test(filetype)) {
// 读取结果在filereader.result里面
$(`<img src="${this.result}">`).appendto("body");
}
}
// 打印原始file对象
console.log(this.files[0]);
// base64方式读取
filereader.readasdataurl(this.files[0]);
});
把原始的file对象打印出来是这样的：
它是一个window.file的实例，包含了文件的修改时间、文件名、文件的大小、文件的mime类型等。如果需要限制上传文件的大小就可以通过判断size属性有没有超，单位是字节，而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名的后缀可能会不准，而通过这种判断会比较准。上面的代码使用了一个正则判断，如果是一张图片的话就把它赋值给img的src，并添加到dom里面，但其实这段代码有点问题，就是web不是所有的图片都能通过img标签展示出来，通常是jpg/png/gif这三种，所以你应该需要再判断一下图片格式，如可以把判断改成：
/^image/[jpeg|png|gif]/.test(this.type)
然后实例化一个filereader，调它的readasdataurl并把file对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
使用filereader除了可读取为base64之外，还能读取为以下格式：
// 按base64的方式读取，结果是base64，任何文件都可转成base64的形式
filereader.readasdataurl(this.files[0]);
// 以二进制字符串方式读取，结果是二进制内容的utf-8形式，已被废弃了
filereader.readasbinarystring(this.files[0]);
// 以原始二进制方式读取，读取结果可直接转成整数数组
filereader.readasarraybuffer(this.files[0]);
其它的主要是能读取为arraybuffer，它是一个原始二进制格式的结果。把arraybuffer打印出来是这样的：
可以看到，它对前端开发人员也是透明的，不能够直接读取里面的内容，但可以通过arraybuffer.length得到长度，还能转成整型数组，就能知道文件的原始二进制内容了：
let buffer = this.result;
// 依次每字节8位读取，放到一个整数数组
let view = new uint8array(buffer);
console.log(view);
如果是通过第二种拖拽的方式，应该怎么读取文件呢？如下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里面。
第三种粘贴的方式，通常是在一个编辑框里操作，如把div的contenteditable设置为true：
<div contenteditable="true">
hello, paste your image here
</div>
粘贴的数据是在event.clipboarddata.files里面：
$("#editor").on("paste", function(event) {
let file = event.originalevent.clipboarddata.files[0];
});
但是safari的粘贴不是通过event传递的，它是直接在输入框里面添加一张图片，如下图所示：
它新建了一个img标签，并把img的src指向一个blob的本地数据。什么是blob呢，如何读取blob的内容呢?
blob是一种类文件的存储格式，它可以存储几乎任何格式的内容，如json：
let data = {hello: "world"};
let blob = new blob([json.stringify(data)],
{type : \\\’application/json\\\’});
为了获取本地的blob数据，我们可以用ajax发个本地的请求：
$("#editor").on("paste", function(event) {
// 需要settimeout 0等图片出来了再处理
settimeout(() => {
let img = $(this).find("img[src^=\\\’blob\\\’]")[0];
console.log(img.src);
// 用一个xhr获取blob数据
let xhr = new xm

云服务器可以装几个网站
开年采购季云服务器最低价
代开后跳转到其他域名附件谷歌推广邮件好
删除之前绑定的空间已做记录值解析
非法信息问题-云服务器问题
阿里云十年服务器多少钱一个月
云服务器ecs安装软件
为云服务器配置学习环境