-1

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;
niamulbengali
  • 292
  • 1
  • 3
  • 16
Asad Ahmed khan
  • 13
  • 6
  • 2
    Show us what you have tried. SO isn't a free code writing service. The objective here is for you to post your attempts to solve your own issue and others help when they don't work as expected. See [ask] and [mcve] – charlietfl Dec 06 '20 at 14:40

1 Answers1

0

This pattern will do:

var filename = fullPath.replace(/^.*[\\\/]/, '')

Question duplicate and answer from :

How to get the file name from a full path using JavaScript?

doo_doo_fart_man
  • 394
  • 3
  • 11