In fact I'm not sure if what I'm asking is exactly what I need, which is to select several images to be temporarily saved inside my server folder and then click a button to store them permanently.
What I want to do is to be able to visualize them and then save them, obtaining their name.
Until now I don't have any advanced code because I'm lost.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vista Previa</title>
</head>
<body>
<center>
<input type="file" name="archivo" id="imagen">
<button id="guardar">Guardar</button>
<div id="preview">
<!-- Lugar donde se mostraran las imagenes -->
</div>
</center>
</body>
</html>
One option would be to use the Interface URL , specifically its createObjectURL method to represent the object
File
that is received in theinput
To view them you can use html5 FileReader .
If what you want is to be able to have certain images temporarily saved and then make a decision whether or not to save them on your server, it would be best to save them on the client's computer.
There are certain alternatives to do this:
If you decide on localStorage you need to store the base64 since the image as such is not possible, you would have something like the function to have the base 64:
and to store in the localstorage
These images can be listed on the client's computer and then the ones selected are uploaded to your server.
With the following code you will be able to select multiple images that will be displayed in independent img tags with different ids so that you can work on them later.
I hope it helps you. Greetings.