Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to achieve asynchronous image upload JavaScript related knowledge, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Code used

This code is written in VanillaJS and does not use any third-party JavaScript libraries, so if you use any third-party framework, you can use the constructs provided by the framework or library to adjust the concept and implement it.

Step 1: load the image into the browser

As shown in the above example, there are two examples of HTML elements.

The DOM element displays the selected image. The DOM element selects an image file for the user. Using the JavaScript file API, you can listen to change event handlers and load image access using JavaScript.

Step 2: generate Base64 thumbnails

After accessing the image using JavaScript, load it into HTML5 FileReader and convert it to Base64 data URL. Then update the DOM element with the Base64 data URL.

Step 3: upload files using Ajax

Using Ajax, the image upload is started to the server. With JavaScript, HTML form submission will be triggered asynchronously, and the specific code will vary depending on the server implementation, especially in terms of the HTTP method (for example, POST in this case) and URL.

If the server response contains an image URL, you can use it to update the DOM element accordingly, or if the server maintains an appropriate image access path convention (for example, / images/), you can use it to load the image.

Step 4: (optional) client-side thumbnail generation

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 ());};}; these are all the contents of the article "how JavaScript implements asynchronous image upload". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.