today we're going to create a simple system for uploading multiple images without storing them in a database, using only html and javascript. Without further ado, let's get to the code ```html <body> <form actino='fileecho.php' method='POST' enctype='multipart/form-data'> <labe>Image File: <input type='file' name='images[]' id='images' multiple> </label><br> <div id='message'></div><br> <input type='submit' value='submit'> </form> <script src='app.js'></script> </body> ``` ```js function listFiles(e){ var files = e.target.files; var fileMessage = "<br><strong>SELECTED FILES</strong><br>"; for(var i=0; i< files.length; i++){ var file = files[i]; fileMessage += "<strong>" + file.name + "</strong>: " + file.type + " - " + file.size + " bytes<br>"; if(file.type.match("image.*")){ displayImage[file]; } } document.getElementById("message").innerHTML = fileMessage; } function displayImage(file){ var reader = new FileReader(); reader.onload = function(e){ var img = new Image(); img.src = e.target.result; img.style.height = "100px"; document.getElementById("message").appendChild(img); }; reader.readAsDataURL(file); } var el = document.getElementById("images"); el.accept = "image/*"; document.getElementById("images").addEventListener("change", listFiles, false); ``` There is more to file handling than we show here, but sadly the specification and implementation is variable at the moment. let us know in the comments what you think, if you have implemented the code
X
We would like to inform you that the domain chat-to.dev, as well as the associated project, is available for purchase. Those interested in negotiating or obtaining more information can contact us at contact@chat-to.dev.
We would like to thank everyone who has followed and supported the project so far.