JavaScript 实现前端异步图像上传与即时预览

<!DOCTYPE html> 
<html> 
<body> 
<input type="file" id="imageFileInput" accept=".jpg, .jpeg, .png" /> 
<img src="https://:0" id="preview" /> 
<script> 
document.getElementById('imageFileInput').addEventListener('change', function() { 
var img = this.files[0]; 
uploadImage(img, '/image/upload', function(url) { 
// Image upload to server response 
// Show the image using setImageUrl(URL) 
}); 
getBase64ImageUrl(img, function(base64ImageUrl) { 
var height = 100, 
width = 100; 
getThumbnail(base64ImageUrl, height, width, function(base64ThumbnailUrl) { 
setImageUrl(base64ThumbnailUrl); 
}) 
}); 
}, false); 
function setImageUrl(url) { 
document.getElementById('preview').setAttribute('src', url); 
}; 
function uploadImage(img, url, callback) { 
var xhr = new XMLHttpRequest(); 
var fd = new FormData(); 
xhr.open("POST", url, true); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4 && xhr.status == 200) { 
 callback && callback(xhr.responseText); 
} 
}; 
fd.append("upload_image", img); 
xhr.send(fd); 
}; 
function getBase64ImageUrl(img, callback) { 
var reader = new FileReader(); 
reader.readAsDataURL(img); 
reader.onload = function() { 
callback && callback(reader.result); 
}; 
reader.onerror = function(error) { 
console.log('Error: ', error); 
}; 
}; 
function getThumbnail(base64ImageUrl, height, width, callback) { 
var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext("2d"); 
var image = new Image(); 
image.src = base64ImageUrl; 
image.onload = function() { 
ctx.drawImage(image, 0, 0, width, height); 
callback && callback(canvas.toDataURL()); 
}; 
} 
</script> 
</body> 
</html>