HTML5文件上传操作

博客园 - Xproer-松鼠

PHP实现视频文件上传完整实例 ueditor 富文本编辑器粘贴图片时让图片居中 TinyMCE富文本编辑器粘贴图片自动上传问题解决 UEditor富文本编辑器图片粘贴和上传问题 vue项目中使用tinymce富文本编辑器实现图片上传/粘贴格式富文本编辑器复制word文档中的图片富文本编辑器：自己实现图片上传功能和图片粘贴上传（kindeditor）前端上传文件或者上传文件夹前端实现文件上传（点击+拖拽） - Xproer-松鼠 HTML5应用之文件拖拽上传使用HTML5实现多文件上传 HTML5 文件上传的2种方式 html5实现文件批量上传组件 html5中怎么实现多文件上传功能 HTML5 进阶系列：文件上传下载 html实现上传大文件分片上传【前后台完整版】大文件分片上传大文件、视频分片上传，断点续传

HTML5文件上传操作

Xproer-松鼠 · 2023-12-25 · via 博客园 - Xproer-松鼠

一、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 实例
文件选择器（<input type="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/

欢迎入群一起讨论

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。原文来自 — 版权归原作者所有。

推荐订阅源

博客园 - Xproer-松鼠

一、File对象

二、FileList对象