Purpose: To convert the image array items into an input list and send them to the controller.
Below is the JavaScript code that selects and modifies images:
const output = document.querySelector("output");
const input = document.getElementById("roUpload");
let imagesArray = [];
input.addEventListener("change", () => {
const files = input.files
for (let i = 0; i < files.length; i++) {
imagesArray.push(files[i]);
}
displayImages();
})
function displayImages() {
let images = ""
imagesArray.forEach((image, index) => {
images += `<div class="image">
<img src="${URL.createObjectURL(image)}" alt="image">
<span onclick="deleteImage(${index})">×</span>
</div>`
})
output.innerHTML = images;
}
Now, here are the codes for sending to the controller:
var fileData = FormData();
function SendImage(){
**var files = output.files;**
for (var i = 0; i != files.length; i++) {
fileData.append("files", files[i]);
}
$.ajax(
{
type: "POST",
url: "/ChinaProblemsReport/SendImage/",
contentType: false, // Not to set any content header
processData: false,
data: fileData,
});
$(document).ajaxStop(function(){
window.location.reload();
});
};
Additionally, here are the HTML codes:
<input type="file" id="roUpload" multiple="multiple" accept="image/jpeg, image/png, image/jpg" />
<output></output>
I am facing no issues in sending to the controller, my concern lies in how to populate the files in the SendImage() function with the images from the output.
Your assistance is appreciated. Thank you.