js上传文件

最新推荐文章于 2023-10-06 18:03:41 发布

LookMe_WK

最新推荐文章于 2023-10-06 18:03:41 发布

阅读量416

点赞数

分类专栏：原生js # 文件解析文章标签： javascript

本文链接：https://blog.csdn.net/LookMe_WK/article/details/106341401

版权

原生js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

文件解析

2 篇文章 0 订阅

订阅专栏

利用js实现图片或者文本的上传和加载

HTML5新增内建对象，可以读取本地文件内容。
var reader = new FileReader(); 可以实例化一个对象
实例方法
1、reader.readAsDataURL()：DataURL形式读取文件
2、reader.readAsText()：读取文件根据特殊的编码格式转化为内容(字符串形式)
事件监听
onload 当文件读取完成时调用
属性
reader.result 文件读取结果

单文件上传和加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="upFile" id="fileMian">
    <img src="" alt="">
</body>

</html>

<script>
var fileTarget = document.getElementById('fileMian');
        var imgs = document.querySelector('img');
        // 绑定onchange事件监听file的改变
        fileTarget.onchange = function() {
            console.dir(fileTarget);
            // 上传文件的信息
            console.log(fileTarget.files);
            // 1.创建实例化对象
            var filesAction = new FileReader();
            // 2.读取文件
            // console.log(this.files[0]);
            // console.dir(filesAction);
            filesAction.readAsDataURL(this.files[0]);
            filesAction.onload = function() {
                console.log(filesAction.result);
                imgs.src = filesAction.result;
            }
        }
</script>

下面为上传图片并解析效果图

多文件上传和加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="files" id="filesCon" multiple>
    <ul>
    </ul>
</body>
</html>

<script>
        var filesTarget = document.querySelector('#filesCon');
        var ul = document.querySelector('ul');
        // 1.监听改变
        filesTarget.onchange = function() {
            for (var i = 0; i < this.files.length; i++) {
                fileRe(this.files[i]);
            }
        }

        function fileRe(file) {
            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function() {
                var li = document.createElement('li');
                li.innerText = reader.result;
                ul.appendChild(li);
            }
        }
    </script>

在多文件解析是由于for循环进行过快，后一个解析会在前一个解析结束之前执行，会覆盖掉前一个解析，导致解析失败。所以需要写一个方法，在for循环里调用它，此时他们的作用域会在创建的方法的作用域中互补干扰。所以会自己解析自己的。
结果如下图所示

上传解析图

LookMe_WK

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js上传文件

利用js实现图片或者文本的上传和加载HTML5新增内建对象，可以读取本地文件内容。var reader = new FileReader(); 可以实例化一个对象实例方法1、reader.readAsDataURL()：DataURL形式读取文件2、reader.readAsText()：读取文件根据特殊的编码格式转化为内容(字符串形式)事件监听onload 当文件读取完成时调用属性reader.result 文件读取结果单文件上传和加载<!DOCTYPE html>&l
复制链接

扫一扫