Show filename only in upload field

I'm trying to show filename only in my upload filefield. Is my idea correct? For some reason it doesn't work. The method works but I still get full path in the field. Keep in mind I have addFileField() which gives more f开发者_运维技巧ilefields if a user wants.

script.js

var ufile = 1;
var currentE = null;

function addFileFild(){
    ufile = ufile+1;
    $("#addFileFild").before('<p><input type="file" name="ufile'+ufile+'" size="20"></p>');
    return 0;
}

function showSrc() {
   document.getElementById("myframe").href = document.getElementById("ufile").value;
   var theexa=document.getElementById("myframe").href.replace("file:///","");
   alert(document.getElementById("myframe").href.replace("file:///",""));
}

upload.html

<div class="block upload">
<h2>{% trans "Lähetä tiedostoja" %}</h2>
   <div class="content">
     <form id="uploadForm" action="{% url fileman.views.upload %}" method="post"  enctype="multipart/form-data">{% csrf_token %}
<p><input type="file" name="ufile1" onChange="showSrc();" size="20"><a href="#" id="myframe"></a></p>
<p id="addFileFild"><a href="#" id="myframe" onclick="return addFileFild();"><img src="{{ fileman_media_url }}/plus_icon.png"WIDTH=25 HEIGHT=25></a></p>
<p><input type="hidden" name="path" value="{{ pwd }}">
<input type="submit" onclick="TINYPOP.show('Lähetetään! Ole hyvä odota. Tämä ikkuna sulkeutuu kun lähetys on valmistunut...',{sticky: true, position: 'top-left'});" value="Lähetä!"/></p>
</form>
</div>
</div>

You can not control what is displayed in the file input element. Modern Day browsers limit it to just the file name while older browser show the whole path.