使用jQuery动态添加文件输入框？

Question

为了使我的网页尽可能兼容，我将使用常规文件输入，问题是我需要提供多个上传选项。

我的想法是当第一个输入被设置时，第二个输入框将被显示(最多10个)。假设我们填写了5个并且有6个可见。现在我们清除第二个输入框，这将导致两个空输入框，因此最后一个(6(empty))输入框应该被隐藏。

这可以用Jquery实现吗？

编辑1：这是我成功创建的内容，它工作得很好。但我确信，懂得更好的jquery的人可以编写更智能的脚本：

在视图中：

        <div id="fileInput0" class="fileVisible">
            <input type="file" id="file0" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(0)" />
        </div>
        <div id="fileInput1" class="fileHidden">
            <input type="file" id="file1" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(1)" />
        </div>
        <div id="fileInput2" class="fileHidden">
            <input type="file" id="file2" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(2)" />
        </div>
        <div id="fileInput3" class="fileHidden">
            <input type="file" id="file3" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(3)" />
        </div>
        <div id="fileInput4" class="fileHidden">
            <input type="file" id="file4" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(4)" />
        </div>
        <div id="fileInput5" class="fileHidden">
            <input type="file" id="file5" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(5)" />
        </div>         
        <div id="fileInput6" class="fileHidden">
            <input type="file" id="file6" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(6)" />
        </div>
        <div id="fileInput7" class="fileHidden">
            <input type="file" id="file7" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(7)" />
        </div>
        <div id="fileInput8" class="fileHidden">
            <input type="file" id="file8" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(8)" />
        </div>
        <div id="fileInput9" class="fileHidden">
            <input type="file" id="file9" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(9)" />
        </div>

脚本：

function fileChangeHandler() {

    var hiddenClass = 'fileHidden';
    var visibleClass = 'fileVisible';

    var parentDiv = $(this).parent;
    var idNr = $(this).attr('id').replace('file', '');

    idNr++;

    if($(this).val().length > 0){

        for(var i = idNr; i < 10; i++){
            if($('#fileInput' + i).hasClass(visibleClass)){
                if($('#file' + i).val().length < 1){ return;}
            }
            else{
                    $('#fileInput' + i).attr('class' , visibleClass);
                    return;
            }
        }
    }
}

function resetFileField(id) {
    var hiddenClass = 'fileHidden';
    var visibleClass = 'fileVisible';
    var counter;

    $('#fileInput'+id).html($('#fileInput'+id).html());
    $('#file'+id).change(fileChangeHandler);

    for(var i = 9; i > -1 ;i--)
    {

        if(id != i)
        {
            if($('#fileInput' + i).hasClass(visibleClass)){
                if($('#file' + i).val().length < 1){
                    $('#fileInput' + i).attr('class', hiddenClass);
                }
            }
        }
    } 
}

有更好的解决方案吗？

- Banshee

---

完全复制自[jquery]如何动态添加文件上传？ - T.J. Crowder

Answer 1

你可以创建一个容器 div，用于包含新的文件输入字段和添加新输入字段的按钮：

$('#addFile').click(function() {
    // when the add file button is clicked append
    // a new <input type="file" name="someName" />
    // to a filesContainer div
    $('#filesContainer').append(
        $('<input/>').attr('type', 'file').attr('name', 'someName')
    );
});

- Darin Dimitrov

Answer 2

是的，您只需像添加其他元素一样向表单添加文件输入：

$("#theForm").append("<input type='file' name='foo'>");

我认为这听起来很熟悉：[jquery]如何动态添加文件上传？

- T.J. Crowder

Answer 3

如果你想要不同的输入名称

var i;
$('#addFile').click(function() {
    i=i+1;
    $('#filesContainer').append(
        $('<input/>').attr('type', 'file').attr('name', 'file'+i)
    );
});

- Nima shayesteh

Answer 4

另一个选项是，由于您正在使用 JQuery，可以使用Bootstrap fileInput。它允许您使用一个控件上传多个图像。你还有其他选项，如允许的文件类型、大小、高度、宽度等。

<script type="text/javascript">
    $("#postedImage").fileinput({
      uploadUrl: "/SomeUrl", // you must set this for ajax uploads
      maxFileCount: 10,
      enctype: "multipart/form-data",
      overwriteInitial: false
    });
</script>

<input id="postedImage" type="file" class="file" multiple>

这里有一个链接，如果你感兴趣的话可以给其他上传者使用。

- jade290