Tengo el siguiente codigo en una vista con el cual el suario selecciona imagenes
<input type="file" id="files" class="fileuploader" style="display:none;" multiple />
con el siguiente codigo javascript el usuario puede previsualizar las imagenes, quitar o agregar mas
$('.fileuploader').change(function (event) {
var files = event.target.files;
var imgType = /image.*/;
for (i = 0; i <= files.length; i++) {
var reader = new FileReader();
var file = files[i];
if (!file.type.match(imgType)) {
continue;
}
else {
reader.onload = function (file) {
var fileContent = file.target.result;
cont++;
$('.box1').append('<div id="div' + cont + '" class="thumbnail box2" style="margin-bottom:0px;" ><img width="90" height="70" src="' + fileContent + '" name="img'+cont+'">'
+ '<div class="box3" ><button onclick="quitarImg(' + cont + ')" id="btn' + cont + '" type="button" class="btn btn-danger btn-xs" aria-label="Left Align" style="padding:0px 3px; line-height:15px;">'
+ '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div ></div>');
}
}
reader.readAsDataURL(this.files[i]);
});`
function quitarImg(numId) {
var elementId = document.getElementById("div" + numId);
elementId.remove();
cont--;
}
si el usuario por ejemplo, selecciono 3 imagenes primero, las previsualizo, volvio a seleccionar otras dos imagenes y al final quito una imagen de las 5 que habia seleccionado como envio las 4 imagenes que al final el usuario decidio guardar a mi controlador para que las pueda guardar. Ya no puedo usar
<input type="file" id="files" class="fileuploader" style="display:none;" multiple />introducir el código aquí
para recibirlas en el controlador con algo como esto
List<IFormFile> files
porque Input solo tiene referencia las ultimas dos imagenes y no las 4 que al final quedaron ya que el usuario se supone quito una. Como el codigo javascript genera algo como esto
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...//Z" name="img1" width="90" height="70">
habia pensado usar el valor del atributo src="" para enviarlo como parametro al controlador pero creo que no es posible. Lo otro que se me ocurre es usar sessionstorage pero la verdad no se como hacerlo (llevo dos semanas aprendiendo javascript y atorado con esto un poco mas de una semana). En resumen solo quiero enviar al controlador las imagenes finales despues de que el usuario agregue o quite algunas.