Question

我正在尝试使用jQuery来复制我的文件输入组，这样当用户选择要上传的文件时，它会自动创建另一个文件上传字段和说明字段。

这个工作正常，除了我更改我已经选择了输入的文件的文件。当我这样做时，它会复制所有文件输入组。

了解为何会如此发生？

JSFiddle：http://jsfiddle.net/czLmbjd6/4/

HTML：

    <div id = "add-photos">
    <input type="file"></input>
        <label>Description:</label>
        <input type = "text"></input>
    </div>

    <div id = "additional-photos">
    </div>

JS：

$(document).ready(function(){
    bindFileInputs();
});

function bindFileInputs(){
    $("input:file").change(function (){
        addPhotoField();
    });
}


function addPhotoField() {
    var id = 1; //standin for now, will dynamically update this number later
    createPhotoField(id);
}

function createPhotoField(id){

    var p = $("#add-photos");

    p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
        $(this).val('');

        if ($(this).attr('type') == 'file'){
            console.log("type is file");
            $(this).attr('name', 'data[Image][' + id + '][image]');
        }

        if ($(this).attr('type') == 'text'){
            console.log("type is text");
            $(this).attr('name', 'data[Image][' + id + '][description]');
        }

        });
    bindFileInputs();
}

Answer 1

试试这个Js：

    $(document).ready(function(){
        bindFileInputs();
    });

    function bindFileInputs(){
        $("input:file").change(function (){

            if($('.newF').length ==0 ){
                createPhotoField(Number($(this).attr('id'))+1);
            }
            if($(this).hasClass('newF')){
             createPhotoField(Number($(this).attr('id'))+1);
            }
        });
    }




    function createPhotoField(id){
        $('.newF').removeClass('newF')
         id+=1;
        var p = $("<div/>");
 p.appendTo("#additional-photos"); 

        p.html('<input class="newF" id= "'+id+'" type="file"></input><label>Description:</label><input type = "text"></input>')

        p.children().find('input,select').each(function(){
            $(this).val('');

            if ($(this).attr('type') == 'file'){
                console.log("type is file");
                $(this).attr('name', 'data[Image][' + id + '][image]');
            }

            if ($(this).attr('type') == 'text'){
                console.log("type is text");
                $(this).attr('name', 'data[Image][' + id + '][description]');
            }

            })
        bindFileInputs();
    }

更新后的条款： http://jsfiddle.net/czLmbjd6/12/

Answer 2

在bindFileInputs();中查看您对createPhotoField的来电。您正在为页面中所有change元素的$("input:file")事件添加另一个处理程序。如果您更改任何这些元素中的文件（最后一个元素除外），addPhotoField将会触发两次或更多次。

执行：

var newItem = p.clone();
newItem.appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
  ...
});

// instead of bindFileInputs();
newItem.find("input:file").change(function (){
   addPhotoField();
});

Answer 3

尝试

＆＃13;

$(document).ready(function() {
  bindFileInputs($('#add-photos input[type="file"]'));
});

function bindFileInputs(input) {
  //use one() to register a handler which will be fired only once
  input.one('change', function() {
    addPhotoField();
  });
}


function addPhotoField() {
  var id = 1; //standin for now, will dynamically update this number later
  createPhotoField(id);
}

function createPhotoField(id) {

  var p = $("#add-photos");

  var $clone = p.clone().appendTo("#additional-photos").removeAttr("id");

  $clone.find('input,select').val('');
  $clone.find('input:text').attr('name', 'data[Image][' + id + '][description]');
  var $file = $clone.find('input:file').attr('name', 'data[Image][' + id + '][image]');
  bindFileInputs($file)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Select a file with the file upload control. It should create a new file input group.
<div id="add-photos">
  <input type="file" />
  <label>Description:</label>
  <input type="text" />
</div>
<div id="additional-photos"></div>

＆＃13;

Answer 4

好吧试试这个

<div id = "add-photos">
<input type="file" inuse="false"></input>
    <label>Description:</label>
    <input type = "text"></input>
</div>

<div id = "additional-photos">
</div>





    $(document).ready(function(){
    bindFileInputs();
});

function bindFileInputs(){
    $("input:file").change(function (){   

        if($(this).attr('inuse') == "false"){
            addPhotoField();                
        }          
        $(this).attr('inuse', 'true');
    });
}

var id = 0;
function addPhotoField() {
    id += 1; //standin for now, will dynamically update this number later
    createPhotoField(id);
}

function createPhotoField(id){
    $("#add-photos").find('input:file').attr('inuse', 'false');
    var p = $("#add-photos");

    p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
        $(this).val('');

        if ($(this).attr('type') == 'file'){
            console.log("type is file");
            $(this).attr('name', 'data[Image][' + id + '][image]');
            $(this).attr('inuse', 'false');
        }

        if ($(this).attr('type') == 'text'){
            console.log("type is text");
            $(this).attr('name', 'data[Image][' + id + '][description]');
        }

        });
    $("#add-photos").find('input:file').attr('inuse', 'true');
    bindFileInputs();
}

jQuery：复制文件输入组

4 个答案: