The code below displays the path of the uploaded images. I am using a multi-step form with four image-uploading fields. The images upload, and it shows the full path in the preview page, but I want to display just the names with extensions of the images—not the full path. Please help me achieve that.
*Html form fields*
<p><input type="file" name="image" accept="image/*" id="id_post_image">
<input type="file" name="image2" accept="image/*" id="id_post_image2"></p>
<p>
<input type="file" name="image3" accept="image/*" id="id_post_image3">
<input type="file" name="image4" accept="image/*" id="id_post_image4"></p>
*preview form fields*
<div class="preview_img" id="review_Condition" name="review_Condition"></div>
<div class="preview_img" id="review_Condition2" name="review_Condition"></div>
<div class="preview_img" id="review_Condition3" name="review_Condition"></div>
<div class="preview_img" id="review_Condition4" name="review_Condition"></div>
*javascript image path display*
document.getElementById("review_Condition").innerHTML = document.getElementById("id_post_image").value;
document.getElementById("review_Condition2").innerHTML = document.getElementById("id_post_image2").value;
document.getElementById("review_Condition3").innerHTML = document.getElementById("id_post_image3").value;
document.getElementById("review_Condition4").innerHTML = document.getElementById("id_post_image4").value;
This pattern will do:
var filename = fullPath.replace(/^.*[\\\/]/, '')
Question duplicate and answer from :