HTML5文件上传操作

最新推荐文章于 2024-07-24 10:40:52 发布

M_Snow

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量225

点赞数

文章标签： html5 前端 javascript

原文链接：https://www.cnblogs.com/songsu/p/17926613.html

版权

一、File对象

在 HTML5 出现之前，在 Web 上没有文件创建和复制，也没有文件处理，HTML5 规范中包含 3 个文件相关的规范：“文件 API”“文件 API：目录和系统”以及“文件 API：写入器”，文件 API 包含 File 对象、FileList 对象和 FileReader 对象。

为了保障客户端安全，大部分浏览器都未实现“文件 API：目录和系统”和“文件 API：写入器”规范。而“文件 API”主要实现了读取文件，不能写入文件。

File 对象代表一个文件，用来读写文件信息
File 对象继承了 Blob 对象或者说是一种特殊的 Blob 对象，所有可以使用Blob 对象的场合都可以使用
File 对象构造函数

<!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="file" multiple id="file">
    <input type="button" value="上传文件" id="fileUpload">
    <!-- 指定显示图片的位置 -->
    <div id="box"></div>
    <script>
        // 1、获取文件
        var file = document.querySelector("#file");
        var fileUpload = document.querySelector("#fileUpload");
        var box = document.querySelector("#box");
        // 读取多个文件时，需要使用files属性
        fileUpload.onclick = function(){
            var files = file.files;
            for(var i=0;i<files.length;i++)
            {
                var read = new FileReader();
                read.onload = function()
                {
                    var div = document.createElement("div");
                    div.innerHTML = "<img src='"+this.result+"' class=img'">
                    box.appendChild(div);
                }
                read.readAsDataURL(files[i]);
            }
        }
    </script>
</body>
</html>

浏览器原生提供一个 File() 构造函数，用来生成 File 实例对象：

var file = new File(array,name[,options]);

File 对象配置对象的属性说明如下：

说明
type 字符串，表示实例对象的 MIME 类型
lastModified 时间戳，表示上次修改的时间，默认为 Date.now()
File 对象的属性和方法如下：

属性名说明
name 文件名或文件路径
size 文件大小（单位：字节）
type 文件的 MIME 类型
lastModified 最后修改时间
二、FileList对象
FileList 对象是一个类似于数组的对象，代表一组选中的文件，每个成员都是一个 File 实例
文件选择器（）的 files 属性，返回一个 FileList 实例。
拖拉一组文件时，目标区的 DataTransfer.files 属性，返回一个 FileList 实例
FileList 的实例属性主要是 length，表示包含多少个文件
FileList 的实例方法主要是 item()，用来返回指定位置的实例
FileList 的实例是一个类似于数组的对象，可以直接用方括号运算符，即 myFileList[0] 等同于 myFileList.item(0)

<!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="file" multiple id="file">
    <input type="button" value="上传文件列表" id="btn">
    <script>
        var btn = document.querySelector("#btn");
        var file = document.querySelector("#file");

        btn.onclick = function () {
            // Alt+shift+f
            //获取多个文件
            var files = file.files;
            for (var i = 0; i < files.length; i++) {
                document.write("<hr>");
                document.write("文件名：" + files[i].name+"，");
                document.write("文件大小：" + files[i].size+"，");
                document.write("文件修改时间：" + files[i].lastModified+"，");
            }
        }
    </script>
</body>
</html>

参考文章：http://blog.ncmem.com/wordpress/2023/12/25/html5%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e6%93%8d%e4%bd%9c/
欢迎入群一起讨论

在这里插入图片描述

M_Snow

关注

0
点赞
踩
0

收藏

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

在 HTML5 出现之前，在 Web 上没有文件创建和复制，也没有文件处理，HTML5 规范中包含 3 个文件相关的规范：“文件 API”“文件 API：目录和系统”以及“文件 API：写入器”，文件 API 包含 File 对象、FileList 对象和 FileReader 对象。File 对象继承了 Blob 对象或者说是一种特殊的 Blob 对象，所有可以使用Blob 对象的场合都可以使用。FileList 对象是一个类似于数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。
复制链接

扫一扫