1

我正在动态创建文件上传表单。我将动态创建的表单附加到动态创建的 div 上。到目前为止，一切都很好。

其中两个表单元素显示为有效的表单字段：type=text 字段和 type=file 字段。

在 appendChild-ing 两个 type=image 字段之后，图像按钮确实显示在弹出表单中，但由于某种原因，我收到一个 javascript 错误“错误：TypeError：document.forms.fileform.Upload 未定义”。

警报提示显示 document.forms['fileform'].length 只是两个元素，而不是我期望的四个元素。

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

我应该补充一点，如果我使用plain-jane type="submit" 而不是 type="image" 按钮，则此表单可以正常工作。但这不是我想要的，我不甘于平庸。

感谢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 回答