Javascriptを使用してファイルアップロードボックスを動的に生成

Question

私は、ユーザーがファイルを選択できるようにするhtml/javascriptセット（PHPで解釈される）を作成しようとしています。別のものを表示します。

function displayFileInput() { 
var counter = document.getElementById("counter").value; 
var n = (parseInt(counter)+1).toString(); 
var element = document.getElementById("container"); 
var string = "<br /><input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\" />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\" />"; 
element.innerHTML = element.innerHTML + string; 
document.getElementById("counter").value=n; 
return false;} 

私が使用しているHTMLコードはこれです：

<form enctype=\"multipart/form-data\" method = \"post\" action=\"newPost.php\" id = \"rental_form\"> 
<input type = \"text\" name = \"rent_name\" size = \"30\" value = \"Insert your post title here\"/><br /> 
<textarea rows= \"20\" cols = \"100\" name = \"rent_posttext\"> 
Insert your post text here! 
</textarea><br /> 
<div id = \"container\"> 
<input type = \"file\" name = \"file1\" onchange = \"javascript:displayFileInput()\" /> 
Default:<input type = \"radio\" name = \"main_picture\" value = \"1\" /> 
</div> 
<input type = \"submit\" /> 
<input type = \"text\" id = \"counter\" value = \"1\" style = \"display:noe;\"> 

すべてが最初に動作しているようですが、問題はこれです：できるだけ早く私は、ファイルを選択すると、それが正しく、別のファイルを表示します前のファイルの情報を削除します。たとえば、Google Chromeでは、「ファイルを選択」入力ボタンの隣に「ファイルが選択されていません」と表示されます。

フォームをPHPスクリプトに送信すると、ファイルが認識されますが、ファイルごとに「4」というエラーが記録されます。つまり、アップロードされたファイルがないことを意味します。何らかの形で、新しいファイル入力を動的に生成するときに、すべてのファイル情報を取り除いています。助けて！これは完全にあなたの要素の内容を置き換え、その過程で以前のユーザ選択（複数可）を払拭さ

element.innerHTML = element.innerHTML + string; 

：

Answer 1

あなたの問題は次のようになります部品によって引き起こされています。 innerHTML = ...;の代わりにappendChildを使用すると、より良い結果が得られますが、コードを少しでも再作成する必要があります。

このような何かが動作するはずです：

function displayFileInput() { 
    var counter = document.getElementById("counter").value; 
    var n = (parseInt(counter)+1).toString(); 
    var element = document.getElementById("container"); 
    var newInput = document.createElement("div"); 
    var string = "<input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\" />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\" />"; 
    newInput.innerHTML = string; 
    element.appendChild(newInput); 
    document.getElementById("counter").value=n; 
    return false; 
} 

例：http://jsfiddle.net/dsKFr/

また、あなたはあなたのHTMLマークアップのすべての引用符をエスケープする必要はありません。ちょうどJavaScriptのバージョンです（さらに二重引用符で一重引用符を変えることで回避できます）。