Hello Guys,
I'm a beginner in web developing and currently building a website for my assignment.In the website,i have to create a form that allow user to upload multiple images in multiple field.
My problem is when user upload the first images,they can't proceed to upload the second images and so on.Same thing to when user remove the 1st images,they can't seem to upload again.Below please see the code that i had write so far.
Can anyone assists me on this?
Thank you.
<form method="post" action="partner_rider4"id="form_img"> <div class="mb-2"><h2 class="title-form">Upload file<span></span></h2></div>
<div class="form-row text-lg-left text-center">
<div class="col-lg-12">
<div class="d-inline-block mr-lg-3">
<div class="panel-main-upload">
<div class="panel-btn">
<div class="button_outer">
<div class="btn_upload">
<input type="file" id="upload_file" name="userImage[]">
<img src="<?= base_url('img/icon-upload.svg') ?>" class="mb-2"><br>
Upload Document
</div>
<div class="file_uploading-text">Uploading..</div>
<div class="processing_bar"></div>
<div class="success_box"></div>
</div>
<div class="error_msg"></div>
<div class="uploaded_file_view" id="uploaded_view">
<span class="file_remove">X</span>
</div>
</div><!-- panel-btn -->
</div><!-- panel-main-upload -->
<p class="text-center mt-3">Id card/Passport</p>
</div>
<div class="d-inline-block mr-lg-3">
<div class="panel-main-upload">
<div class="panel-btn">
<div class="button_outer ">
<div class="btn_upload">
<input type="file" id="upload_file" name="userImage[]">
<img src="<?= base_url('img/icon-upload.svg') ?>" class="mb-2"><br>
Upload Document
</div>
<div class="file_uploading-text">Uploading..</div>
<div class="processing_bar"></div>
<div class="success_box"></div>
</div>
<div class="error_msg"></div>
<div class="uploaded_file_view" id="uploaded_view">
<span class="file_remove">X</span>
</div>
</div><!-- panel-btn -->
</div><!-- panel-main-upload -->
<p class="text-center mt-3">Driver license</p>
</div>
</div>
</div>
<div class="form-row mt-5 action-form action-position">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary w-100"value="Finish">Confirm registration</button>
<a href="<?= base_url('partner_rider/partner_rider2') ?>" class="btn btn-link w-100 mt-lg-2"><img src="<?= base_url('img/icon-arrow-left-purple.svg') ?>" class="mr-3"><?= cclang('previous'); ?></a>
</div>
</div>
</form>and this is my code for the function,I know there are something wrong with my code but i can't figure it out.
<script>
var btnUpload = $("#upload_file"),
btnOuter = $(".button_outer");
btnUpload.on("change", function(e){
var ext = btnUpload.val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
$(".error_msg").text("Not an Image...");
} else {
$(".error_msg").text("");
btnOuter.addClass("file_uploading");
setTimeout(function(){
btnOuter.addClass("file_uploaded");
},3000);
var uploadedFile = URL.createObjectURL(e.target.files[0]);
setTimeout(function(){
$("#uploaded_view").append('<img src="'+uploadedFile+'" />').addClass("show");
},3500);
}
});
$(".file_remove").on("click", function(e){
$("#uploaded_view").removeClass("show");
$("#uploaded_view").find("img").remove();
btnOuter.removeClass("file_uploading");
});
</script>