I have several input fields of type "file" that allow users to upload images. Previously, I had a script that worked with a single input and was created using a class selector. Now, as I need to work with multiple inputs, I tried changing the script by assigning IDs, but it's not functioning properly yet. Why is that?
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.image-upload-wrap').hide();
$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content').show();
$('.image-title').html(input.files[0].name);
};
reader.readAsDataURL(input.files[0]);
} else {
removeUpload();
}
}
function removeUpload() {
$('.file-upload-input').replaceWith($('.file-upload-input').clone());
$('.file-upload-content').hide();
$('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function () {
$('.image-upload-wrap').addClass('image-dropping');
});
$('.image-upload-wrap').bind('dragleave', function () {
$('.image-upload-wrap').removeClass('image-dropping');
});body {
font-family: sans-serif;
background-color: #eeeeee;
}
// Rest of CSS code here...
</script><br />
// HTML structure for file uploads goes here...
At the moment, when you upload an image, it shows up in all other input fields as well.