Show filename from upload filefield with javascript
<p>I need your help. This works so far that I will get alerts when I add a filefield and add files to them. But when I want to change a previous field it will show the last ones value. I have tried using the different id:s but I'm stuck.</p>

<p>Also how to show the filename only in showSrc() here?</p>

<p>upload.html</p>

<pre><code>&lt;form id="uploadForm" action="{% url fileman.views.upload %}" method="post"  enctype="multipart/form-data"&gt;{% csrf_token %}
&lt;p&gt;&lt;input type="file" name="ufile1" id="myfile1" onChange="javascript:showSrc();" size="20"&gt;&lt;a href="#" id="myframe1"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p id="addFileFild"&gt;&lt;a href="#" id="myframe" onclick="return addFileFild();"&gt;&lt;img src="{{ fileman_media_url }}/plus_icon.png"WIDTH=25 HEIGHT=25&gt;&lt;/a&gt;&lt;/p&gt;
</code></pre>

<p>script.js</p>

<pre><code>function addFileFild(){
  ufile = ufile+1;
  myfile = myfile+1;
  myframe = myframe+1;
  $("#addFileFild").before('&lt;p&gt;&lt;input type="file" name="ufile'+ufile+'" id="myfile' +myfile+'" onChange="javascript:showSrc();" size="20"&gt;&lt;a href="#" id="myframe' +myframe+'"&gt;&lt;/a&gt;&lt;/p&gt;');
return 0;
}


function showSrc() {
  document.getElementById("myframe"+myframe).href = document.getElementById("myfile" +myfile).value;
  var theexa=document.getElementById("myframe"+myframe).href.replace("file:///","");
  alert(document.getElementById("myframe"+myframe).href.replace("file:///",""));
  }
</code></pre>

<p>This is where I would have to get the correct field value each time:</p>

<pre><code>document.getElementById("myfile" +myfile).value;
</code></pre>

<p>Here is the solution by Dr.Molle with added C:/fakepath removal for chrome and IE8+.</p>

<pre><code>function showSrc(obj) {
  //obj.nextSibling.href = obj.value;
  // this is for Chrome and IE8+ excluding C:/fakepath/...
  var filename = obj.value.replace(/^.*\\/, '')
  //Write filename to page.
  obj.parentNode.replaceChild(document.createElement('span'),obj.parentNode.lastChild);
  obj.parentNode.lastChild.appendChild(document.createTextNode(filename));

}
</code></pre>
