<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- <button onclick="getImage()">图片预览</button> -->
<button onclick="getfile()">本地文件预览</button>
<script>
// https://blog.csdn.net/lichwei1983/article/details/43893025 二进制数据的操作
// function getImage() {
// let input = document.createElement('input');
// input.type = 'file';
// input.click()
// input.onchange = function (e) {
// // console.log(e.target.files);
// // console.log(e.target.files[0])
// let files = e.target.files[0]
// let reader = new FileReader();
// reader.readAsDataURL(files);
// reader.onload = function (e) {
// let saveCanvas = document.createElement("canvas");
// let ctx = saveCanvas.getContext("2d");
// // ctx.fillStyle = "rgba(255, 255, 255, 0)";
// let images = new Image();
// console.log(e.target.result)
// images.src = e.target.result;
// images.onload = function () {
// ctx.drawImage(images, 0, 0);
// // document.body.appendChild(images)
// document.body.appendChild(saveCanvas)
// }
// }
// }
// }
// 在画布上定位图像：
// context.drawImage(img, x, y);
// 在画布上定位图像，并规定图像的宽度和高度：
// context.drawImage(img,x,y,width,height);
// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// img 规定要使用的图像、画布或视频。
// sx 可选。开始剪切的 x 坐标位置。
// sy 可选。开始剪切的 y 坐标位置。
// swidth 可选。被剪切图像的宽度。
// sheight 可选。被剪切图像的高度。
// x 在画布上放置图像的 x 坐标位置。
// y 在画布上放置图像的 y 坐标位置。
// width 可选。要使用的图像的宽度。（伸展或缩小图像）
// height 可选。要使用的图像的高度。（伸展或缩小图像）
function getfile() {
let input = document.createElement('input');
input.type = 'file';
// input.accept="image/gif, image/jpeg" //规定类型 aplication/zip https://blog.csdn.net/zhuyangru/article/details/70254789
input.click();
input.onchange = function (e) {
let files = e.target.files[0];//是什么格式就是什么格式 type计算机本质对应的
// console.log(files)
let file = new FileReader()
//二进制对象 数组
file.readAsArrayBuffer(files)
//翻译成二进制文件
// console.log(files)
// file.readAsBinaryString(files);
//读取文本文件
// let file1 = new Blob([files]);//二进制对象
// console.log(file1)
// file.readAsText(file1,'gbk')
// instance of FileReader.readAsText(blob,encoding)//;
// 参数节
// 二进制对象
// Blob类型 或 File类型
// 编码类型(可选)
// 传入一个字符串类型的编码类型，如缺省，则默认为“utf - 8”类型
//读取文本文件
//file.readAsText(files, "GBK");//编码格式utf-8 国际标准 日韩中通用 GBK国标中国标准(本土化) gb2312基本汉字码
// GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换：
// GBK、GB2312－－Unicode－－UTF8
// UTF8－－Unicode－－GBK、GB2312
// escape()转码个式过时 十六进制 encodeURI(url) url转码 十六进制 encodeURIComponent()url 转码
file.onload = function (e) {
console.log(e.target.result)
//查看文件内容字节大小
}
}
}
// abort(): void 终止文件读取操作
// readAsArrayBuffer(file): void 异步按字节读取文件内容，结果用ArrayBuffer对象表示 ArrayBuffer
// readAsBinaryString(file): void 异步按字节读取文件内容，结果为文件的二进制串 翻译成二进制文件
// readAsDataURL(file): void 异步读取文件内容，结果用data: url的字符串形式表示 图片路径文件
// readAsText(file, encoding): void 异步按字符读取文件内容，结果用字符串形式表示 解读文本文件
// 事件名称 描述
// onabort 当读取操作被中止时调用
// onerror 当读取操作发生错误时调用
// onload 当读取操作成功完成时调用
// onloadend 当读取操作完成时调用, 不管是成功还是失败
// onloadstart 当读取操作将要开始之前调用
// onprogress 在读取数据过程中周期性调用
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
<script type="text/javascript">
function imgPreview(fileDom){
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
}
//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片！");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<img id="preview" />
<br />
<input type="file" name="file" onchange="imgPreview(this)" />
</body>
</html>
1392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
