使用jquery动态添加文件输入？

Question

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

我的想法是，当设置第一个输入时，将显示第二个（最多 10 个）。假设我们已经填充了 5 个并且有 6 个可见。我们现在清除第二个输入，这将导致两个空输入，所以最后一个（6（空））输入应该被隐藏。

Jquery 可以做到这一点吗？

Edit1：这是我设法创建的，效果很好。然而，我确信更了解 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);
                }
            }
        }
    } 
}

什么是更好的解决方案？

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

Answer 2

是的，您可以像添加任何其他元素一样向表单添加文件输入：

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

我认为这听起来很熟悉：[jquery]How do I add file uploads dynamically?

Answer 3

另一个选项，因为您使用的是 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>

Here 是其他上传者的链接，如果您有兴趣。

Answer 4

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

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