js 上传文件预览的简单实例

2023年5月27日上午6:32 • JavaScript

下面是针对“js上传文件预览的简单实例”的攻略，具体步骤如下：

准备工作

在开始编写 js 上传文件预览的代码之前，需要先准备好以下工作：

一个文本编辑器，用于编写代码。
一个支持 JavaScript 的浏览器，用于运行代码和进行预览。
需要用到的 HTML 和 CSS 代码，用来实现页面布局和样式。

实现方法

具体实现 js 上传文件预览，需要分以下几个步骤：

HTML 代码

首先，在 HTML 页面中，需要添加一个 input 标签，用于实现文件上传功能，同时还需要添加一个 img 标签，用于实现图片的预览显示。代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传文件预览示例</title>
    <style>
        #preview {
            max-width: 100%;
            max-height: 200px;
        }
    </style>
</head>
<body>
    <input type="file" id="file" name="file">
    <br>
    <img id="preview" src="" alt="预览区域">
</body>
</html>

JavaScript 代码

接下来，在 JavaScript 中，需要使用 FileReader 对象来读取上传的文件，并将其转换成 URL，用于在 img 标签中进行预览显示。

下面给出两种示例：

示例1：上传任意类型的文件

该示例可以上传任意类型的文件，包括图片、文本等。

<script>
    // 获取 input 文件上传标签
    var file = document.getElementById('file');
    // 获取 img 预览标签
    var preview = document.getElementById('preview');

    // 绑定文件上传的 change 事件
    file.addEventListener('change', function() {
        // 获取文件对象
        var fileObj = this.files[0];

        // 创建 FileReader 对象
        var reader = new FileReader();

        // 读取文件并将结果以 URL 形式保存在 result 属性中
        reader.readAsDataURL(fileObj);

        // 当文件读取完成后执行
        reader.onload = function() {
            // 将得到的 URL 展示在 img 标签中
            preview.setAttribute('src', reader.result);
        }
    });
</script>

示例2：上传指定类型的图片文件

该示例仅允许上传指定类型的图片文件，并在图片预览区域中进行显示。

<script>
    // 获取 input 文件上传标签
    var file = document.getElementById('file');
    // 获取 img 预览标签
    var preview = document.getElementById('preview');
    // 允许上传的图片类型
    var allowType = ['image/jpeg', 'image/png', 'image/gif'];

    // 绑定文件上传的 change 事件
    file.addEventListener('change', function() {
        // 获取文件对象
        var fileObj = this.files[0];

        // 判断文件类型是否是允许上传的图片类型
        if (allowType.indexOf(fileObj.type) === -1) {
            alert('请上传 jpg、png 或 gif 格式的图片');
            return;
        }

        // 创建 FileReader 对象
        var reader = new FileReader();

        // 读取文件并将结果以 URL 形式保存在 result 属性中
        reader.readAsDataURL(fileObj);

        // 当文件读取完成后执行
        reader.onload = function() {
            // 将得到的 URL 展示在 img 标签中
            preview.setAttribute('src', reader.result);
        }
    });
</script>