Question

我正在创建一个简单的Web应用程序，用户可以使用该应用程序编写带有附加文件的消息。

multiple html file inputs with javascript link http://img38.imageshack.us/img38/4474/attachments.gif

“附加其他文件”链接尚不起作用。它应该在每次单击时向表单添加一个额外的文件输入控件。

我需要一个JavaScript方法 addanotherfileinput（）来替换点击的锚：

        <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a>

使用这个新表行，文件输入和锚点：

        <input type="file" name="Attachment1" id="Attachment1" class="textinput" />
    </td>
</tr>
<tr>
    <td></td>
    <td>
        <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a>

并且还增加数字：Attachment2，Attachment3，Attachment4等

我该怎么做？

Answer 1

您可以使用DOM动态插入文件输入

var myTd = /* Get the td from the dom */

var myFile = document.createElement('INPUT');
myFile.type = 'file'
myFile.name = 'files' + i; // i is a var stored somewhere
i++;

myTd.appendChild(myFile);

或者你可以使用这个

http://developer.yahoo.com/yui/examples/uploader/uploader-simple-button.html

Answer 2

可能有更好的方法，但我通过创建一组HTML表单元素然后使用JavaScript隐藏/显示行来更新CSS类来完成此客户端。

编辑：我会把它留在这里作为替代方法，但我喜欢通过DOM更好地添加INPUT元素的想法。

Answer 3

您可能不希望替换锚点，只需在其前面插入一些东西。

我使用Prototype来做这样的事情，因为它会消除很多浏览器的不一致性，特别是在表格和表格方面。

使用Prototype，它看起来像这样：

function insertFileField(element, index) {
    element.insert({
        before: "<input type='file' name='Attachment" + index + " class='textinput'>"
    });
}

// And where you're hooking up your `a` element (`onclick` is very outdated,
// best to use unubtrustive JavaScript)
$('attachlink').observe('click', function(event) {
    event.stop();
    insertFileField(this, this.up('form').select('input[type=file]').length + 1);
});

...最后的位找到包含链接的表单，找出有input个类型file的数量，并为索引添加一个。{/ p>

还有其他方法，通过Prototype提供的Element构造函数，但文本工作得很好（事实上，它通常要快得多）。

与jQuery，MooTools，YUI，Glow或其他几个JavaScript框架类似，虽然略有不同。

如何使用JavaScript来扩展HTML表单？

3 个答案: