1

ファイルアップロードフォームを動的に作成しています。動的に作成されたフォームを動的に作成されたdivに添付します。ここまでは順調ですね。

2つのフォーム要素が有効なフォームフィールドとして表示されます。type=textフィールドとtype=fileフィールドです。

2つのtype=imageフィールドをappendChildした後、画像ボタンは実際にポップアップフォームに表示されますが、何らかの理由でjavascriptエラー「エラー：TypeError：document.forms.fileform.Uploadisundefined」が発生します。 "。

警告プロンプトは、document.forms ['fileform']。lengthが2つの要素にすぎず、私が期待する4つの要素ではないことを示しています。

divとdiv内のフォームを作成するコード：

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  document.getElementById("fileformdiv").appendChild(fileform);
  document.forms['fileform'].appendChild(descriptionprompt);
  document.forms['fileform'].appendChild(filedescription);
  document.forms['fileform'].appendChild(linebreak);
  document.forms['fileform'].appendChild(filename);
  document.forms['fileform'].appendChild(linebreak);
  document.forms['fileform'].appendChild(uploadbutton);
  document.forms['fileform'].appendChild(cancelbutton);

  document.forms['fileform']['Upload'].onclick = function() { submitFile(); return false; };
  document.forms['fileform']['Cancel'].onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

  for(i=0;i<document.forms['fileform'].length;i++){
     alert(document.forms['fileform'][i].name);
  }
}

type="image"ボタンではなくplain-janetype= "submit"を使用すれば、このフォームは問題なく機能することを付け加えておきます。しかし、それは私が望んでいることではなく、私は平凡に落ち着きません。

私を解決策に導いてくれたMusaに感謝します。

私が変更され：

document.forms['fileform']['Upload'].onclick = function() { submitFile(); return false; };


document.forms['fileform']['Cancel'].onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

に：

submitbutton.onclick = function() { submitFile(); return false; };


cancelbutton.onclick = function() { document.getElementById("fileformdiv").parentNode.removeChild(document.getElementById("fileformdiv")); };

...そして出来上がり、スクリプトはエラーなしで動作します。それでも、フィールドはフォームフィールドとして表示されません。しかし、私はそれらにonclicksを付けることができ、彼らは彼らがすることになっていることをするので、実際には問題ではありません。

4

1 に答える 1

1

いくつかの検索を行いましたが、<input type="image">要素はフォーム要素コレクションに含まれていません。備考http://msdn.microsoft.com/en-us/library/ms537449(v=VS.85).aspxを参照してください。したがって、から参照することはできません。フォーム要素。すでに要素への参照があるので、それを使用する必要があります

if(! document.getElementById("fileformdiv")){
  var fileformdiv = document.createElement("div");
  fileformdiv.setAttribute("id","fileformdiv");
  fileformdiv.setAttribute("style","position:relative;top:-200px;left:-250px;height:160px;line-height:30px;width:220px;border:#aaa 1px solid;background:#eee;z-index:10;text-align:left;padding:10px 10px 10px 10px;");
  document.getElementById("stampContainer").appendChild(fileformdiv);

  var fileform = document.createElement("form");
  fileform.setAttribute("enctype","multipart/form-data");
  fileform.setAttribute("id","fileform");
  fileform.setAttribute("name","fileform");

  var descriptionprompt = document.createTextNode("Say something about this file:");

  var filedescription = document.createElement("input");
  filedescription.setAttribute("id","filedescription");
  filedescription.setAttribute("name","filedescription");
  filedescription.setAttribute("type","text");
  filedescription.setAttribute("style","position:relative;width:200px;height:30px;margin:10px 10px 10px 0px;");

  var filename = document.createElement("input");
  filename.setAttribute("id","filename");
  filename.setAttribute("name","filename");
  filename.setAttribute("type","file");
  filename.setAttribute("style","position:relative;width:200px;margin:10px 10px 10px 0px;");

  var uploadbutton = document.createElement("input");
  uploadbutton.setAttribute("name","Upload");
  uploadbutton.setAttribute("id","Upload");
  uploadbutton.setAttribute("type","image");
  uploadbutton.setAttribute("style","position:relative;margin:0px 0px 0px 60px;width:80px;height:30px;");
  uploadbutton.setAttribute("src",baseUrl+"images/upload.gif");

  var cancelbutton = document.createElement("input");
  cancelbutton.setAttribute("name","Cancel");
  cancelbutton.setAttribute("id","Cancel");
  cancelbutton.setAttribute("type","image");
  cancelbutton.setAttribute("style","position:relative;margin:-30px 0px 0px 140px;width:80px;height:30px;");
  cancelbutton.setAttribute("src",baseUrl+"images/cancel.gif");

  var linebreak = document.createElement("br");


  fileformdiv.appendChild(fileform);
  fileform.appendChild(descriptionprompt);
  fileform.appendChild(filedescription);
  fileform.appendChild(linebreak);
  fileform.appendChild(filename);
  fileform.appendChild(linebreak);
  fileform.appendChild(uploadbutton);
  fileform.appendChild(cancelbutton);

  uploadbutton.onclick = function() { submitFile(); return false; };
  cancelbutton.onclick = function() { fileformdiv.parentNode.removeChild(fileformdiv); };

  for(i=0;i<fileform.length;i++){
     alert(fileform[i].name);
  }
}
于 2012-08-27T00:42:37.977 に答える