JavaScript实现异步图像上传功能
当向服务器上传图像时，根据服务器操作的复杂性和服务器性能，需要几秒钟到几分钟的时间来完成。本文的重点是在图像上传至服务器时使用javascript立即显示图像。
介绍
当使用javascript将图像上传到服务器时，根据服务器操作的复杂性，可能需要几秒到几分钟来完成操作。在某些情况下，即使图像上传成功，也需要花费更多的时间，这取决于服务器对图像进行额外处理的能力。
本文展示了一种使用代码示例立即显示图像的方法(使用图像的base64编码版本)，同时将其上载到服务器，而无需等待操作完成。这种方法的目的是提高web应用程序的用户体验,而不等待服务器做整个图像的处理(例如,缩略图生成、应用过滤器等)后,上传成功,因为它可以在客户端web应用程序上展示图片。
背景
在使用aws s3作为图像存储时，最初遇到了这个问题。图像缩略图的设置是使用aws lambda完成的，在使用web应用程序的javascript成功上传图像到s3之后，s3将异步触发aws lambda函数，该函数将生成图像的缩略图并将其存储在另一个s3中。尽管这是一个高度可伸缩和可靠的图像缩略图生成解决方案，但是web应用程序要等到生成缩略图才能在应用程序的视图中显示它，这是不现实的。
使用的代码
此代码使用vanillajs编写，不使用任何第三方javascript库，因此如果您使用任何第三方框架，您可以使用框架或库提供的构造来调整概念并实现它。
步骤1:将图像加载到浏览器
如图所示在上面的例子中,有两个html元素的例子。< img > dom元素有显示选中的图像。<input> dom元素为用户选择图像文件。使用javascript文件api,可以听改变事件处理程序和加载图像访问使用javascript。
步骤2:生成base64缩略图
使用javascript访问图像后，将其加载到html5 filereader并转换为base64数据url。然后使用base64数据url更新 dom元素。
步骤3:使用ajax上传文件
使用ajax，图像上传被启动到服务器。使用javascript, html表单提交将异步触发，具体的代码将根据服务器实现而异，特别是在http方法(例如，这里是post)和url方面。
如果服务器响应包含图像url，则可以使用它相应地更新 dom元素，或者如果服务器维护了适当的图像访问路径约定(例如，/images/)，则可以使用它加载图像。
步骤4:(可选)客户端缩略图生成
<!doctype html>
<html>
<body>
<input type="file" id="imagefileinput" accept=".jpg, .jpeg, .png" />
<img src="//: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>
总结
以上所述是小编给大家介绍的javascript实现异步图像上传功能，希望对大家有所帮助