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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
js获取ip和地区
Mar 10 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript实现区块链
Mar 14 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
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
PHP 源代码压缩小工具
2009/12/22 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
python中的多线程实例教程
2014/08/27 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python socket模块方法实现详解
2019/11/05 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
500行python代码实现飞机大战
2020/04/24 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
Ajxa常见问题都有哪些
2014/03/26 面试题
国培计划培训感言
2014/03/11 职场文书
超市中秋节促销方案
2014/03/21 职场文书
骨干教师考核方案
2014/05/09 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
JVM之方法返回地址详解
2022/02/28 Java/Android
全新239军机修复记
2022/04/05 无线电