I have a file type input with multi select property, when an image is selected, a function is called and the selected image is previewed, this is done by creating the image tag by jquery and setting its src value . I want to create an input of type file at the same time as creating the image tag and its value equal to the selected image so that I can process them on the server side.
The code I wrote is as follows
var imagesPreview = function (input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function (event) {
const file = event.target.result;
function AttrValues() {
var src = event.target.result;
var type = 'image';
return {
src: src,
type: type
};
}
$($.parseHTML('<input/>')).attr(AttrValues()).removeAttr('data-sider-select-id').appendTo(placeToInsertImagePreview);
var HidInput = $($.parseHTML('<input type="file" hidden name="Images"/>')).appendTo(placeToInsertImagePreview);
const reader = new FileReader();
reader.onload = function (e) {
// Do something with the file data
HidInput.val(e.target.result);
console.log(HidInput.target.result);
};
$('input[type="image"]').on("click", function () {
//$(this).hide('slow', function () { $(this).remove(); });
$(this).remove();
});
}
reader.readAsDataURL(input.files[i]);
}
}
};