<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#canvas {
width: 800px;
height: 500px;
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<input type="file" value="file" multiple id="imgFile">
<img src="" alt="">
</body>
</html>
<script src="./jquery.js"></script>
<script>
$("#imgFile").change(function (e) {
var file = this.files[0],
newImg = window.URL.createObjectURL(file);
$("img").attr("src", newImg);
window.URL.revokeObjectURL(file);
/*
*打印img src为blob:null/7bb77dab-a404-443d-a963-295f9fe08d47，转化为了一个http格式
* 兼容性写法
* window[window.webkitURL?'webkitURL':'URL']['createObjectURL']
按照一些博客的说法，createObjectURL具有更好的性能，但是在移动端苹果支持性不太好
需要注意的是通过调用createObjectURL都会创建一个新的URL对象，为了提升性能，有必要在我们确定不使用它时将它释放出来，
通过revokeObjectURL
* 例如我们需要加载一张预览图，那么在预览图加载完毕后就没有必要在继续使用这个URL对象了
* 此时就可以将我们之前通过createObjectURl创建的URl对象释放来优化性能
* 语法：
* window.URL.revokeObjectURL(file)
* */
})
</script>
<script>
/*
关于优化file按钮
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
*
* accept:指定file可以上传的文件类型，只能配合file使用，不推荐，建议通过后台来控制上传文件的格式
* 如果规定了该属性那么在我们点击file浏览页面时格式不符合的文件将不会被展示
* accept="image/gif" 表示只接收GIF和JPEG两种图像
*
*
此时页面只会显示a标签，我们可以通过css来控制a标签样，并且在点击a标签时实际触发file按钮即可
js部分
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
*
* 当然，使用label会更好
* <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<label for="fileElem">Select some files</label>
* */
</script>
<script>
/*
* 通过change来监听input是否读取了文件
* */
$('input[type=file]').change(function () {
console.log(this.files)
//对象DOM会提供一个FilelList（files），files为一个数组，代表用户选择的文件，如果用户只选择了一个文件，那我们只考虑第一个文件
//file对象的属性
/*
name:文件名称
size：使用bytes描述的文件大小 单位B
type：文件类型，例如图片的是:"image/png"
* */
var file = this.files[0];
/*
* H5新API，允许web程序读取储存在用户计算机上的文件内容，但是必须是在用户同意之后才能进行该操作，表示用户同意该操作的行为有
* 1.input type=file 返回的FileList对象
* 2.拖拽操作生成的DataTransfer
* 3.HTMLCanvasElement上执行mozGetAsFile()方法返回结果
*
*
* */
var reader = new FileReader();
/*方法
* abort() 终止文件读取操作
* readAsArrayBuffer(file) 异步按照字节读取文件内容，结果用ArrayBuffer对象表示
* readAsBinaryString(file) 异步按照字节读取文件内容，结果为文件的二进制串
* readAsDataURL(file) 异步读取文件内容，结果用data:url的字符串形式表示,也就是说会将图片转化为base64格式
* readAsText(file,encoding) 异步按字符读取文件内容，结果用字符串形式表示
*
* */
/*事件
* onabort 当读取操作被中止时调用
* onerror 当读取操作发生错误时调用
* onload 当读取操作成功时调用
* onloadend 当读取操作完成时调用，不管成功还是失败
* onloadstart 当读取操作将要开始之前调用
* onprogress 在读取数据过程中调用
* */
// 读取图片转化为base64格式输出
// reader.readAsDataURL(file);
// 读取文本输出UTF-8格式
// reader.readAsText(file,'utf-8')
// 读取文本为二进制字节
reader.readAsArrayBuffer(file)
reader.onload = function () {
// 通过 reader.result 来访问生成的 DataURL
// $("img").attr("src", reader.result)
console.log(reader);
};
});
</script>
参考文章：
FileReader对象
Using files from web applications
网友评论