0

所以，我想做的是添加多个文本字段并上传多个文件。用户在点击之前只能看到 1 个用于上传的字段，并且它正在浏览文件。文本字段也是如此。当用户单击或开始在文本字段中输入时，将出现下一个。到目前为止，我还没有实现我的目标。我刚开始使用 JavaScript，所以我的代码严重损坏，甚至不值得发布。

这样做有哪些不同的方法，你知道利弊吗？

编辑：这是我尝试做的众多方法之一。

<form name="form">
<label for="file">Filename:</label>
<input type="file" name="file[0]" id="file[0]" onclick="addForm()" />
</form>
<br />

<script type="text/javascript">

var part1 = '<label for="file">Filename:</label> <input type="file" name="file[';
var part2 = ']" id="file[';
var part3 =']" onclick="form()" /><br />'

var counter = 0;

function addForm()
{

if (document.form.file[counter].click) 
{
        document.write(part1 + counter + part2 + counter + part3);
        counter++;

}
}
</script>
4

2 回答 2

1

这是一个快速的解决方案：http: //jsfiddle.net/JTDZR/

当为当前活动的文件输入选择一个文件时，它将添加一个新的文件输入，然后它将禁用当前文件输入，因此一次只启用一个。

HTML

<form id="fups" name="form">
<label>
    Filename: <input type="file" name="file[]" />
</label>
</form>​

JS

var fups = document.getElementById("fups");
var file = document.form['file[]'];

fups.onchange = function(){
    file.disabled = true;
    var inp = document.createElement("input");
    inp.type = "file";
    inp.name = "file[]";
    var lab = document.createElement("label");
    lab.innerHTML = "Filename: ";
    lab.appendChild(inp);

    fups.appendChild(lab);
    file = inp;
};
于 2012-11-26T19:15:51.747 回答
0

假设你有这个 HTML：

<form id="myForm">
   <input type="text" />
   <input type="file" />
   <!-- the JS won't affect this element -->
   <input type="submit" />
</form>

您可能使用的相当简化的 javascript 版本如下所示：

var formElement = document.getElementById("myForm");
var children = e.getElementsByTagName("input");
var allowedTypes = new Array("text", "", "file");
// note the empty string - it stands for the default "text" type
for(var i=0; i<children.length) {
   var input = children[i];
   if(0 > allowedTypes.indexOf(input.attributes.getNamedItem("type").value)) {
      input.onFocus = function() {
         formElement.innerHTML += input.outerHTML;
         input.onFocus = null;
      }
   }
}

这可以派生在一个更复杂的示例中，例如为新输入添加容器，因此它们不会总是出现在表单的末尾。另外，我会考虑使用jQuery。当然，这是个人意见，但它为我节省了大量时间和编码。

于 2012-11-26T18:55:27.183 回答