JavaScript实现异步图像上传功能

上传图片到服务器时，根据服务器运行的复杂程度和服务器性能，需要几秒到几分钟才能完成。本文的重点是使用JavaScript在图像上传到服务器后立即显示图像。

介绍

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

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

背景

当使用AWS S3作为图像存储时，第一次遇到这个问题。图像缩略图由AWS Lambda设置。图片通过web应用的JavaScript成功上传到S3后，S3会异步触发AWS Lambda函数，生成图片的缩略图，存储到另一个S3。虽然这是一种高度可扩展和可靠的生成缩略图的解决方案，但对于web应用程序来说，等待缩略图显示在应用程序视图中是不现实的。

使用的代码

这段代码是用VanillaJS编写的，没有使用任何第三方的JavaScript库，所以如果使用任何第三方框架，都可以使用框架或库提供的构造来调整概念并实现。

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

如上例所示，有两个HTML元素的例子。Img DOM元素显示选定的图像。输入的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正文输入类型=' file ' id=' imagefile input ' accept=' .jpg .jpeg，2000 .png '/img src=' http://:0 ' id=' preview '/脚本文档。getelementbyid(' imagefile input ').addEventListener('change '，function(){ var img=this。文件[0]；上传图像(img，'/图像/上传'，函数(url) { //图像上传到服务器响应//使用setImageUrl(URL) })显示图像);getBase64ImageUrl(img，function(base64 imageurl){ var height=100，width=100 getthumbnail(base64 imageurl，高度，宽度，函数(base64缩略图URL){ setImageUrl(base64缩略图URL)；}) });}，false)；函数setImageUrl(URL){文档。getelementbyid(“预览”).setAttribute('src '，URL)；};函数上传图像(img，url，回调){ var xhr=new XMLHttpRequest()；var FD=new FormData()；xhr.open('POST '，url，true)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){回调回调(xhr。response text)；} };fd.append('upload_image '，img)；xhr。发送(FD)；};函数getBase64ImageUrl(img，回调){ var reader=new FileReader()；读者。readasdataurl(img)；reader . onload=function(){ 0回调回调(读者。结果)；};reader.onerror=function(错误){ console.log('Error: '，错误);};};函数getThumbnail(base64ImageUrl，高度，宽度，回调){ var canvas=document。create element(' canvas ')；var CTX=画布。get context(' 2d ')；var图像=新图像();image.src=base64ImageUrlimage。onload=function(){ CTX。绘制图像(图像，0，0，宽度，高度);回调回调(画布。todaytaul())；};}/脚本/正文/html总结

以上所述是小编给大家介绍的Java脚本语言实现异步图像上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！