JavaScript中的文件操作

旧城等待， 2022-05-24 00:09 170阅读 0赞

上传文件的唯一控件<input type="file">.  
  
值得注意的是：如果是一个表单包含了这一控件，那么表单的enctype属性必须为multipart/form-data，method属性必须为post浏览器才正确编码并以multipart/form-data格式发送。  
  
使用该控件上传文件时，js也无法获取该文件的真实路径。  
js可以在提交表单时对文件拓展名进行检查，防止用户上传无效文件。  
  
**File API**  
js的文件操作十分有限，而且无法读取文件内容，在HTML5中的File API提供了File和FileReader这两个对象，可以获取文件信息并读取文件。

下面是一个例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            #show{
                width:500px;
                height:300px;
                border:1px solid #ff0000;
            }
        </style>
        <script>
    window.οnlοad=function() {
        var filein = document.getElementById('file1'),
            infor = document.getElementById('info'),
            showbox = document.getElementById('show');
        //监听change事件
        filein.addEventListener('change',function () {
            //清除showbox的背景图
            showbox.style.backgroundImage = '';
            //检查文件是否选择
            if (!filein.value) {
                infor.innerHTML = '没有选择文件';
                return;
            }
            //获取文件引用
            var file = filein.files[0];
            //获取文件信息
            infor.innerHTML = '文件' + file.name + '<br>' +
                '大小' + file.size + '<br>' +
                ' 修改日期' + 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;
                showbox.style.backgroundImage = 'url(' + data + ')';
            };
            //以url方式读取文件
            reader.readAsDataURL(file);
        });
    
    }
        </script>
    </head>
    <body>
    <p >图片信息:<br></p>
    <div id="info"></div>
    <div id="show" ></div>
    <form action="">
        <input type="file" id="file1" >
    </form>
    </body>
    </html>

上面的代码演示了怎么通过HTML5的FileAPI读取文件内容。

使用DataURL格式督导的文件是一个字符串类似于data:image/png;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像，如果需要服务端处理，将字符串base64后面的字符发送到服务器解码就可以获得源文件的二进制内容。

![70][]

[70]: /images/20220524/4185b5ad7a95484eb85874ef6ffc7d10.png