使用jquery动态添加文件输入？ [英] Adding file inputs dynamically with jquery?

问题描述

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

To make my weppage as compatible as possible I will go with the regular file input, the problem is that I need to offer multiple uploads.

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

My thought is that when the first input is set a second will be shown (up to a max of 10). Say that we have filled 5 and there is 6 visible. We now clear the second input, this will result in two empty inputs so then the last(6(empty)) input should be hidden.

这是否可以使用Jquery？

Is this possible to to with Jquery?

Edit1：这是我设法创建的，它工作正常。我确信知道更好的jquery的人可以做出更聪明的脚本：

This is what I manage to create, it works fine. I am however sure that someone that know jquery better could make a smarter script:

在视图中：

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

什么是更好的解决方案？

What is a better solution?

推荐答案

你可以有一个容器div，它将包含新的文件输入字段和一个添加新输入的按钮：

You could have a container div which will harbor the new file input fields and a button to add new inputs:

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

这篇关于使用jquery动态添加文件输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！