这个例子之前也曾多次写过，主要是依赖ES5提供的Blob对象。
Blob简介
ECMAScript 5引入了Blob对象，允许直接操作二进制数据。Blob对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。
File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
FileList对象：File对象的网页表单接口；
FileReader对象：负责将二进制数据读入内存内容；
URL对象：用于对二进制数据生成URL。
示例
<form action="" id="form">
<input type="file" name="upload_file" id="upload_file">
</form>
<div id="img_wrapper"></div>
|
var upload_file = document.getElementById('upload_file')
var img_wrapper = document.getElementById('img_wrapper')
upload_file.addEventListener('change', function(e) {
var file = this.files[0]
var reader = new FileReader()
reader.onload = function(e) {
var data_url = this.result
var img = document.createElement('img')
img.onload = function(e) {
img_wrapper.innerHTML = ''
img_wrapper.appendChild(this)
}
img.src = data_url
}
reader.readAsDataURL(file)
})
|
