FileReader.onabort
处理abort (en-US)事件。该事件在读取操作被中断时触发。
FileReader.onerror (en-US)
处理error (en-US)事件。该事件在读取操作发生错误时触发。
FileReader.onload
处理load (en-US)事件。该事件在读取操作完成时触发。
FileReader.abort()
中止读取操作。在返回时,readyState属性为DONE。
FileReader.readAsArrayBuffer()
开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString() Non-Standard
开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
FileReader.readAsText()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。
文件进度
<progress id="Progress" value="0" max="100"></progress>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
function showPreview(source) {
var file = source.files[0];
console.log(file);
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
// console.log(this.result);
document.getElementById("portrait").src = e.target.result;
};
//给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载
fr.readAsDataURL(file);
}
var total = source.files[0].size;
fr.onprogress = function(ev) {
// 简单测试了一下 大概12M左右的传输速度
// 推荐测试的时候用一个视频
console.log(ev.loaded / total);
var loading = (ev.loaded / total)*100;
document.getElementById("Progress").value = loading;
}
}
<input type="file" id="upload-file">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
// 用户选择图片进行上传
// 上传成功, 后台返回图片的URL
// 显示在当前页面上
document.getElementById("upload-file").addEventListener("change", function(){
for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
var reader = new FileReader();
reader.onload = function (ev) {
console.log(ev);
console.log(ev.target.result);
var base64Str = ev.target.result.split(",")[1];
//console.log(base64Str)
$.ajax({
url: "reImg.php",
data: {
"base64file": base64Str
},
type: "post",
success: function (res) {
createImg(res);
}
})
}
reader.readAsDataURL(file);
}
});
function createImg(imgSrc){
var theImg = document.createElement("img");
theImg.src = imgSrc;
document.body.appendChild(theImg);
theImg.className = "imgC";
}