0%

js读取文件

发表于 分类于

文章字数：213,阅读全文大约需要1分钟

之前有一个文件转成base64的js操作，其中有一部分是文件的读取。以前没有看到过js的文件操作，这一次特地找了一个demo。原生的javascript好像只支持文件读取，文件的写入似乎不支持。

js读取选中的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var
    fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
 // 监听change事件:
 fileInput.addEventListenser('change',function(){
    //清除背景图片
    preview.style.backgroundImage = '';
    //检查文件是否选择
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    //获取File引用
    var file = fileInput.files[0];
    //获取file信息
    info.innerHTML = `
                    文件: ${file.name}
                    大小: ${file.size}
                    修改: ${file.lastModifiedDate}
                    `;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }
    //读取文件
    var reader = new FileReader();
    reader.onload = function(e){
        var 
            data = e.target.result;
            preview.style.backgroundImage = 'url(' + data + ')';
    };

    //以dataURL的形式读取文件
    reader.readAsDataURL(file);
 });