前端本地文件操作与上传

前端无法像原生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打印出来是这样的 可以发现路径是一个假的,也就是说在浏览器无法获取文件真实存放的位置.** FromData **打印出来的是一个空对象,但不是说它里面的内容是空的,只是他对前端开发人员是透明的,无法查看,修改,删除里面的内容,只能用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]);