HTML5 文件操作

文章目录

  • HTML5 文件操作
    • file元素
      • 选择单个文件
      • 选择多个文件
      • 美化file元素
    • File对象
      • 获取文件信息
      • 转化单位
    • FileReader对象
      • 读取txt文本
      • 在线预览图片
      • 拖拽文件并读取
      • 拖拽图片并预览
    • Blob对象
      • 创建并下载txt文件
      • 将Canvas下载为一张图片

HTML5 文件操作

file元素

语法




accept属性用于设置文件的过滤类型(MIME类型)。

accept属性取值

HTML5 文件操作_第1张图片

选择单个文件

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
    head>
    <body>
        <form method="post">
            <input type="file">
        form>
    body>
html>

在这里插入图片描述在这里插入图片描述

选择多个文件

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
		<form method="post">
			<input type="file" accept="image/png" multiple>
		form>
	body>
html>

在这里插入图片描述在这里插入图片描述在这里插入图片描述

美化file元素

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .fileContainer {
                width: 160px;
                margin: 30px auto;
            }

            .filePicker {
                position: relative;
                width: 160px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                color: #ffffff;
                background: #00b7ee;
            }

            .filePicker input[type="file"] {
                position: absolute;
                top: 0;
                left: 0;
                width: 160px;
                height: 44px;
                opacity: 0;
                cursor: pointer;
            }
        style>
    head>
    <body>
        <div class="fileContainer">
            <div class="filePicker">
                <label>点击选择文件label>
                <input id="fileInput" type="file" accept=" image/*" />
            div>
        div>
    body>
html>

在这里插入图片描述

分析

首先使用opacity: 0;将表单设置为透明,然后使用绝对定位在表单原来的位置上面定义一个label就可以了。

File对象

在文件上传元素中,将会产生一个FileList对象,它是一个类数组对象,表示所有文件的集合。其中,每一个文件就是一个File对象。

想要获取某一个文件对象(即File对象),我们首先需要获取FileList对象,然后再通过数组下标形式来获取。

File对象有以下4个属性

属性 说明
name 文件名
type 文件类型
size 文件大小,单位为B
lastModifiedDate 文件最后修改修改

获取文件信息

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script>
			window.onload = function() {
				var oFile = document.getElementById("fileInput");
				oFile.onchange = function() {
					var file = oFile.files[0];
					console.log("图片名为:" + file.name);
					console.log("图片大小为:" + file.size + "B");
					console.log("图片类型为:" + file.type);
					console.log("最后修改时间为:" + file.lastModifiedDate);
				}
			}
		script>
	head>
	<body>
		<input id="fileInput" type="file" accept=" image/*" />
	body>
html>

HTML5 文件操作_第2张图片

转化单位

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script>
			window.onload = function() {
				var unitArr = ["KB", "MB", "GB", "TB"];
				var oFile = document.getElementById("fileInput");
				var oOutput = document.getElementById("output");
				oFile.onchange = function() {
					var file = oFile.files[0];
					var size = file.size;
					var fileSizeStr = size + "B";
					//B转为KB
					size = size / 1024;
					//转化单位
					for (var i = 0; size > 1; i++) {
                        //size.toFixed(2)表示将size值四舍五入,只取两位小数
						fileSizeStr = size.toFixed(2) + unitArr[i];
						size /= 1024;
					}
					oOutput.innerText = fileSizeStr;
				}
			}
		script>
	head>
	<body>
		<input id="fileInput" type="file" /><br>
		<output id="output">output><br>
	body>
html>

在这里插入图片描述在这里插入图片描述

FileReader对象

在HTML5中,专门提供了一个文件操作的API,即FileReader对象。我们通过FileReader对象可以很方便地读取文件中的数据。

FileReader对象有5个方法,其中4个用来读取文件数据,另外1个用于中断读取操作.

FileReader方法

方法 说明
readAsText() 将文件读取为文本
readAsDataURL() 将文件读取为DataURL格式的base64字符串
readAsBinaryString() 将文件读取为二进制编码
readAsArrayBuffer() 将文件读取为一个ArrayBuffer对象
abort() 中止读取操作

readAsText()方法有两个参数:第1个参数为File对象,第2个参数为文本的编码方式,默认值为“utf-8”。这个方法非常容易理解,表示将文件以文本方式读取,读取的结果就是这个文本文件的内容。

readAsBinaryString()方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串来存储文件。

abort()方法可以用来中止读取操作,在读取大文件时,这个方法非常有用。

FileReader对象的事件

事件 说明
onloadstart 开始读取
onprogress 正在读取
onload 读取成功。如果读取成功,则this.result的值就文件的内容;否则this.result的值为null。
onloadend 读取完成(成功、失败或取消)
onabort 中断
onerror 读取出错

读取txt文本

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script>
			window.onload = function() {
				var oFile = document.getElementById("fileInput");
				var oOutput = document.getElementById("output");
				oFile.onchange = function() {
					var file = oFile.files[0];
					var fileReader = new FileReader();
					fileReader.readAsText(file, "utf-8");
					fileReader.onload = function() {
						oOutput.innerText = this.result;
					}
				}
			}
		script>
	head>
	<body>
		<input id="fileInput" type="file" /><br>
		<output id="output">output>
	body>
html>

在这里插入图片描述

在线预览图片

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script>
			window.onload = function() {
				var oFile = document.getElementById("file");
				var oOutput = document.getElementById("output");
				oFile.onchange = function() {
					var file = oFile.files[0];
					var fileReader = new FileReader();
					fileReader.readAsDataURL(file); //图片转base64
					fileReader.onload = function() {
						var oImg = document.createElement("img");
						oImg.src = this.result;
						console.log(this.result);
						oOutput.appendChild(oImg);
					}
				}
			}
		script>
	head>
	<body>
		<input id="file" type="file" /><br>
		<output id="output">output>
	body>
html>

HTML5 文件操作_第3张图片

拖拽文件并读取

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			#box {
				width: 150px;
				height: 150px;
				border: 1px solid red;
			}
		style>
		<script>
			window.onload = function() {
				var oBox = document.getElementById("box");
				var oOutput = document.getElementById("output");
				//阻止默认行为
				oBox.ondragover = function(e) {
					e.preventDefault();
				}
				//添加ondrop事件
				oBox.ondrop = function(e) {
					e.preventDefault();
					var file = e.dataTransfer.files[0];
					var reader = new FileReader();
					reader.readAsText(file, "utf-8");
					reader.onload = function() {
						oOutput.innerText = this.result;
					}
				}
			}
		script>
	head>
	<body>
		<div id="box">div>
		<output id="output">output>
	body>
html>

HTML5 文件操作_第4张图片

拖拽图片并预览

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<style>
			#box {
				width: 150px;
				height: 150px;
				border: 1px solid red;
			}
		style>
		<script>
			window.onload = function() {
				var oBox = document.getElementById("box");
				var oOutput = document.getElementById("output");
				//阻止默认行为
				oBox.ondragover = function(e) {
					e.preventDefault();
				}
				//添加ondrop事件
				oBox.ondrop = function(e) {
					e.preventDefault();
					var file = e.dataTransfer.files[0];
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function() {
						var oImg = document.createElement("img");
						oImg.src = this.result;
						oImg.style.width = "150px";
						oImg.style.height = "150px";
						oOutput.appendChild(oImg);
					}
				}
			}
		script>
	head>
	<body>
		<div id="box">div>
		<output id="output">output>
	body>
html>

HTML5 文件操作_第5张图片

Blob对象

在HTML5中,还新增了一个Blob对象,用于代表原始二进制数据。前面介绍的File对象也继承于Blob对象。

语法

var blob = new Blob(dataArray, type);

说明

dataArray参数:这是一个数组,可以是String对象(即字符串)、Blob对象(即其他Blob对象)、ArrayBuffer对象、ArrayBufferView对象。

type参数:是一个字符串,表示Blob对象的MIME类型。

创建并下载txt文件

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script>
			window.onload = function() {
				var oTxt = document.getElementById("txt");
				var oBtn = document.getElementById("btn");
				var oContainer = document.getElementById("container");
				oBtn.onclick = function() {
					var text = oTxt.value;
					if (text == "") {
						return;
					}
					var blob = new Blob([text], {
						type: "text/plain"
					});
					var oA = document.createElement("a");
					var url = window.URL.createObjectURL(blob);
					oA.href = url;
					oA.download = "新文件";
					oA.innerText = "下载文件";
					oContainer.appendChild(oA)
				}
			}
		script>
	head>
	<body>
		<textarea id="txt" cols="30" rows="10">textarea>
		<input id="btn" type="button" value="创建链接">
		<div id="container">div>
	body>
html>

HTML5 文件操作_第6张图片

将Canvas下载为一张图片

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var btn = document.getElementById("btn");
				var context = canvas.getContext("2d");
				var text = "hello world";
				context.font = "bold 60px 微软雅黑";
				context.shadowOffsetX = 5;
				context.shadowOffsetY = 5;
				context.shadowColor = "#66ccff";
				context.shadowBlur = 10;
				context.fillStyle = "#ff6699";
				context.fillText(text, 10, 90);
				btn.onclick = function() {
					canvas.toBlob(function(blob) {
						var oA = document.createElement("a");
						var url = window.URL.createObjectURL(blob);
						oA.download = "hello";
						oA.href = url;
						document.body.appendChild(oA);
						oA.click();
						document.body.removeChild(oA);
					}, "image/png", 1);
				}
			}
		script>
	head>
	<body>
		<canvas id="canvas" width="380" height="150" style="border:1px solid silver;">canvas>
		<input id="btn" type="button" value="下载图片">
	body>
html>

HTML5 文件操作_第7张图片

你可能感兴趣的:(#,HTML,html5,html,前端,文件)