JavaScript - input 上传图片并展示（食用简单）

时间：2020-05-03 20:55:48 阅读：38 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>

<head>

<title>图片上传展示</title>

</head>

<body>

var input = document.querySelector("#file");

var img = document.querySelector("img");

window.onload = function () {};

function change(_this) {

var file = input.files[0];

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function () {

img.setAttribute("src", this.result);

};

}

</script>

</body>

</html>

`FileReader` 介绍 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容它不能用于从文件系统中按路径名简单地读取文件。要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

原文：https://www.cnblogs.com/500m/p/12823175.html

踩

(0)

评论一句话评论（0）

分享档案

更多>