JavaScript实现异步图像上传功能


Posted in Javascript onJuly 12, 2018

当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成。本文的重点是在图像上传至服务器时使用JavaScript立即显示图像。

介绍

当使用JavaScript将图像上传到服务器时,根据服务器操作的复杂性,可能需要几秒到几分钟来完成操作。在某些情况下,即使图像上传成功,也需要花费更多的时间,这取决于服务器对图像进行额外处理的能力。

本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成。这种方法的目的是提高web应用程序的用户体验,而不等待服务器做整个图像的处理(例如,缩略图生成、应用过滤器等)后,上传成功,因为它可以在客户端web应用程序上展示图片。

JavaScript实现异步图像上传功能 

背景

在使用AWS S3作为图像存储时,最初遇到了这个问题。图像缩略图的设置是使用AWS Lambda完成的,在使用web应用程序的JavaScript成功上传图像到S3之后,S3将异步触发AWS Lambda函数,该函数将生成图像的缩略图并将其存储在另一个S3中。尽管这是一个高度可伸缩和可靠的图像缩略图生成解决方案,但是web应用程序要等到生成缩略图才能在应用程序的视图中显示它,这是不现实的。

使用的代码

此代码使用VanillaJS编写,不使用任何第三方JavaScript库,因此如果您使用任何第三方框架,您可以使用框架或库提供的构造来调整概念并实现它。

步骤1:将图像加载到浏览器

JavaScript实现异步图像上传功能 

如图所示在上面的例子中,有两个HTML元素的例子。< img > DOM元素有显示选中的图像。<input> DOM元素为用户选择图像文件。使用JavaScript文件API,可以听改变事件处理程序和加载图像访问使用JavaScript。

步骤2:生成Base64缩略图

JavaScript实现异步图像上传功能 

使用JavaScript访问图像后,将其加载到HTML5 FileReader并转换为Base64数据URL。然后使用Base64数据URL更新 DOM元素。

步骤3:使用Ajax上传文件

JavaScript实现异步图像上传功能

JavaScript实现异步图像上传功能

使用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实现异步图像上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
JS使用new操作符创建对象的方法分析
May 30 Javascript
vue 实现上传组件
May 31 Vue.js
Angular4 组件通讯方法大全(推荐)
Jul 12 #Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 #Javascript
详解node.js的http模块实例演示
Jul 12 #Javascript
Vue中使用的EventBus有生命周期
Jul 12 #Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 #Javascript
vue实现引入本地json的方法分析
Jul 12 #Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php检测useragent版本示例
2014/03/24 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
Python多线程编程(五):死锁的形成
2015/04/05 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
中式结婚主持词
2014/03/14 职场文书
品质主管岗位职责
2014/03/16 职场文书
教师节活动主持词
2014/04/02 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
出差报告怎么写
2014/11/06 职场文书
2014年学生工作总结
2014/11/20 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
MySQL kill不掉线程的原因
2021/05/07 MySQL