動的に作成されたHTMLファイル入力要素はデータを投稿しません

Question

私は、document.createElementを使用して動的に作成されるフォームを持っています。コンポーネントも同じ方法で作成されます。このフォームは、ファイルをPHPスクリプトにアップロードするために使用され、送信時にフォームのターゲット属性で指定されたiframeに応答をロードします。

残念ながら、サーバーは空の$ _FILES配列を受け取り、POST要求を調べると、ファイルデータが要求に含まれていないことがわかります。代わりに、Google Chromeデベロッパーツールを使用して動的に作成されたフォームを編集してください（このプロセスではEDITしてコードを絶対に変更しないでください）。その後、フォーム提出は完全に処理され、関連するファイルデータ。

これは、何も変更せずに機能したので、htmlで自分のフォームの構築に問題がないことを認識しています。これはブラウザが私にファイル入力要素を動的に作成するのが好きではないと私に信じさせます。完全期すため

は、ここでは、動的に生成されたフォームです：

<form method="POST" action="includes/uploadPic.php" 
     enctype="multipart/form-data" target="fileResponse"> 
    <input type="file" name="pic"> 
    <input type="submit" value="Upload"> 
</form> 

そしてprint_r($_FILES)は、サーバに空の配列を与えます。

誰でもこのことを私に説明できますか？私の代わりに、ドキュメント内に隠れたフォームを静的に作成し、それが必要なときに関連するdivに追加するだけですが、本当にそのようなことは嫌です。以下は

フォームを生成するコードです：あなたはdivタグ内formタグを入れた場合は、それが動的に作成された要素を投稿しません

var form = document.createElement("form"); 
var fileUpload = document.createElement("input"); 
var uploadBut = document.createElement("input"); 

form.method = "POST"; 
form.action = "includes/uploadPic.php"; 
form.enctype = "multipart/form-data"; 
form.target = "fileResponse"; /* I think you are trying to submit this from in an iframe */ 
fileUpload.type = "file"; 
fileUpload.name = "pic"; 
uploadBut.type = "submit"; 
uploadBut.value = "Upload"; 
form.appendChild(fileUpload); 
form.appendChild(uploadBut); 
dlgContent.appendChild(form); 

Answer 1

はこれを試しますサーバ。しかし、divまたはtableタグの外に持っていけば動作します。

Answer 2

：

var form = document.createElement("form"); 
    var fileUpload = document.createElement("input"); 
    var uploadBut = document.createElement("input"); 

    form.setAttribute("method", "POST"); 
    form.setAttribute("action", "includes/uploadPic.php"); 
    form.setAttribute("enctype", "multipart/form-data"); 
    form.setAttribute("target", "fileResponse"); 
    fileUpload.setAttribute("type", "file"); 
    fileUpload.setAttribute("name", "pic"); 
    uploadBut.setAttribute ("type", "submit"); 
    uploadBut.setAttribute ("value", "Upload"); 
    form.appendChild(fileUpload); 
    form.appendChild(uploadBut); 
    dlgContent.appendChild(form);