15HTML5 文件上传

最新推荐文章于 2024-06-29 16:04:34 发布

远近2021

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量1.3k

点赞数

分类专栏： # html5学习 htmlcss学习园地文章标签： html5

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119582216

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 6 订阅

订阅专栏

html5学习

16 篇文章 2 订阅

订阅专栏

文章目录

1、文件上传
- 获取文件信息
- 限制文件的上传类型
2、文件读取

在之前我们操作本地文件都是使用 flash、 silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。在 HTML5 标准中，默认提供了操作文件的 API 让这一切直接标准化。有了操作文件的 API，让我们的 Web 应用可以很轻松的通过 JS 来控制文件的读取、写入、文件夹、文件等一系列的操作。

1、文件上传

在 HTML4 标准中文件上传控件只接受一个文件，而在新标准中，只需要设置 multiple，就支持多文件上传。按住 Ctrl 或者 Shift 即可选择多个文件。

<input type="file" id="file" multiple />

获取文件信息

选中文件通过 HTMLInputElement.files 属性返回，返回值是一个 FileList 对象，这个对象是一个包含了许多 File 文件的列表。比如我们首先运行上面例子的代码，然后上传一个文件（这里上传的是一个名为 a.png 的图片），然后按 F12 进入控制台，输入代码:

file.files;

在这里插入图片描述
从运行效果我们可以看出每个 File 对象包含了以下信息：

lastModified 表示 UNIX timestamp 形式的最后修改时间。
lastModifiedDate 表示 Date 形式的最后修改时间。
name 表示文件名。只读字符串，只包含文件名称，不包含任何路径。
size 表示文件的字节大小，只读的 64 位整数。
type 表示文件的 MIME 类型。当类型不确定时为 “”。
webkitRelativePath 此处为空，当在 input 上加 webkitdirectory
属性时，用户可选择文件夹，此时 webkitRelativePath 表示文件夹中文件的相对路径。

注：FileList 对象由 DOM 提供，列出了所有用户选择的文件，每一个代表了一个 File 对象。你可以通过检查文件列表的 length 属性决定用户可以选则多少文件。各个 File 对象可以方便地通过访问文件列表来获取，像访问数组那样。

限制文件的上传类型

如果我们需要限制用户上传文件的类型，比如某处我们只希望能够上传图片，那么我们可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。比如：

<!-- 表示只接受 png 图片 -->
accept="image/png" 或 accept=".png"

<!-- 表示接受PNG/JPEG 文件. -->
accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg"

<!-- 表示接受任何图片文件类型. -->
accept="image/*"

<!-- 表示接受任何 MS Doc 文件类型. -->
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"

示例：

<body>
	<form>
		<div>
			<label for="profile_pic">上传图片</label>
			<input
					type="file"
					id="profile_pic"
					name="profile_pic"
					accept=".jpg, .jpeg, .png"
			/>
		</div>
		<div>
			<button>Submit</button>
		</div>
	</form>
</body>

2、文件读取

以上 File 对象只获取到了对文件的描述信息，但没有获得文件中的数据。HTML5 中提供了 FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

首先创建一个 FileReader 实例：

var reader = new FileReader();

属性
FileReader.error 属性表示在读取文件时发生的错误，只读。语法为：

var error = instanceOfFileReader.error;

FileReader.readyState 属性表示 FileReader 状态的数字，只读。取值如下：
在这里插入图片描述
语法为：

var state = instanceOfFileReader.readyState;

FileReader.result 属性表示文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作，只读。

事件处理
在这里插入图片描述
方法

在这里插入图片描述
想要了解更多的知识可以访问 MDN FileReader
示例：

<head>
    <meta charset="UTF-8">
    <title>文件读取</title>
    <script type="text/javascript">
        //检查浏览器是否支持FileReader
        if (typeof FileReader == 'undified') {
            alert('您老的浏览器不行了！');
        }

        function showDataByURL() {
            var resultFile = document.getElementById('fileDemo').files[0];
            if (resultFile) {
                //创建一个 FileReader 实例
                var reader = new FileReader();
                //读取文件数据
                reader.readAsDataURL(resultFile);
                /*读取的过程就相当于 加载过程 */
                /*读取完毕  预览 */
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById('result').innerHTML +=
                        "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
                };
            }
        }

        function showDataByText() {
            var resultFile = document.getElementById('fileDemo').files[0];
            if (resultFile) {
                var reader = new FileReader();
                reader.readAsText(resultFile, 'gb2312');
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById('result').innerHTML += urlData;
                };
            }
        }
    </script>
</head>
<body>
    <input type="file" name="fileDemo" id="fileDemo" multiple="multiple" />
    <input
            type="button"
            value="显示图片"
            id="readAsDataURL"
            οnclick="showDataByURL();"
    />
    <input
            type="button"
            value="显示文本"
            id="readAsText"
            οnclick="showDataByText();"
    />
    <div id="result"></div>
</body>

远近2021

关注

0
点赞
踩
2

收藏

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

文章目录1、文件上传获取文件信息限制文件的上传类型在之前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。在 HTML5 标准中，默认提供了操作文件的 API 让这一切直接标准化。有了操作文件的 API，让我们的 Web 应用可以很轻松的通过 JS 来控制文件的读取、写入、文件夹、文件等一系列
复制链接

扫一扫

专栏目录