アップロードファイルフィールドのファイル名をjavascriptで表示する

Question

私はあなたの助けが必要です。これまでのところ、ファイルフィールドを追加してファイルを追加するときに警告が表示されます。しかし、前のフィールドを変更したいときは、最後の値を表示します。私は別のIDを使用してみました：しかし、私は立ち往生しています。

showSr​​c（）でファイル名を表示する方法もここにありますか？

upload.html

<form id="uploadForm" action="{% url fileman.views.upload %}" method="post" enctype="multipart/form-data">{% csrf_token %} 
<p><input type="file" name="ufile1" id="myfile1" onChange="javascript:showSrc();" size="20"><a href="#" id="myframe1"></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> 

script.js

function addFileFild(){ 
    ufile = ufile+1; 
    myfile = myfile+1; 
    myframe = myframe+1; 
    $("#addFileFild").before('<p><input type="file" name="ufile'+ufile+'" id="myfile' +myfile+'" onChange="javascript:showSrc();" size="20"><a href="#" id="myframe' +myframe+'"></a></p>'); 
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:///","")); 
    } 

私は正しいフィールド値を毎回取得しなければならないところです。ここで

document.getElementById("myfile" +myfile).value; 

は溶液でDr.MolleのchromeとIE8 +に対するC：/ fakepathの削除が追加されました。

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)); 

} 

Answer 1

showSr​​c（）への引数として入力を提供

onChange="showSrc(this)" 

インサイドshowSr​​cアクセスこの引数は：

function showSrc(obj) { 
    obj.nextSibling.href = obj.value; 
    //output the src inside the link 
    obj.nextSibling.innerHTML = ''; 
    obj.nextSibling.appendChild(document.createTextNode(obj.value)); 
    //...... 
    } 

コメントに係る編集機能：

function showSrc(obj) { 
    obj.parentNode.replaceChild(document.createElement('span'),obj.parentNode.lastChild); 
    obj.parentNode.lastChild.appendChild(document.createTextNode(obj.value)); 
}