Question

我正在尝试添加产品按钮来克隆文件上传。这是我的HTML

＆＃13;

<section class="transactionalFormRow">
	<input type="file" name="receipt[]"id="receipt">
	<label for="receipt"><span>UPLOAD SALES RECEIPT*</span></label>
</section>
<a href="#" id="addproduct">Add another Product</a>

＆＃13;

我有jQuery来定位文件名并显示内部标签。它工作得很好，在克隆产品上，它将文本更新回到＆＃34; UPLOAD SALES RECEIPT＆＃34;。但是，当我选择一个新文件时，它总是更新原始文件输入的文件名（#receipt）。

＆＃13;

getReceiptInfo($('#receipt'));

$("#addproduct").click(function(e){
	e.preventDefault();
	var newelement = $(this).prev(".transactionalFormRow").clone();
  var newID = Math.round(new Date().getTime() + (Math.random() * 100));
	var newfileinput = newelement.find(".file-input").attr("id", "receipt-"+newID);
		newfileinput.siblings("label").find("span").text("UPLOAD SALES RECEIPT*");

	getReceiptInfo($("#"+newfileinput.attr('id')));

	$(this).before(newelement);
})

function getReceiptInfo(element){
	var label	 = element.siblings();

	element.change(function(e){
		var fileName = '';
			fileName = e.target.value.split( '\\' ).pop();
		if( fileName )
				label.find( 'span' ).html(fileName);
			else
				label.innerHTML = labelVal;	
	})
}

＆＃13;

Answer 1

你必须在这里复制一些文件https://api.jquery.com/clone/

var defaultLabel = 'UPLOAD SALES RECEIPT*';

$('#prototype').on('change',setLabel);

$("#addproduct").click(function(e){
	e.preventDefault();
	var newelement = $('#prototype').clone(true),
        newID = Math.round(new Date().getTime() + (Math.random() * 100));
    newelement.removeAttr("id");
    newelement.find('input').val('').attr("id", "receipt-"+newID);
    newelement.find('label').attr("for", "receipt-"+newID).find('span').html(defaultLabel);
	$(this).before(newelement);
});

function setLabel(e){
  var fileName = e.target.value.split( '\\' ).pop();
  $(this).find( 'label span' ).html(fileName ? fileName : defaultLabel);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="prototype" class="transactionalFormRow">
	<input type="file" name="receipt[]" id="receipt">
	<label for="receipt"><span>UPLOAD SALES RECEIPT*</span></label>
</section>
<a href="#" id="addproduct">Add another Product</a>

Answer 2

我终于通过更改getReceiptInfo函数并将新的for属性添加到label来使其工作。

function getReceiptInfo(element){
    	$(".file-input").each(function(){
    		$(this).change(function(e){
    			var label	 = $(this).next();
    			var fileName = '';
					fileName = e.target.value.split( '\\' ).pop();
				if( fileName )
					label.find( 'span' ).text(fileName);
				else
					label.text(labelVal);	
    		})
    	})
	}

并将其添加到$（“＃addproduct”）中。点击

newelement.find(".file-input").next().attr("for", "receipt-"+newID);

Answer 3

您要实现的目标非常简单，只需很少的代码即可实现。

第一：

可以通过将原型for元素放在其id内来避免对<input>和相应<label>...</label>的需求。
确保原型输入元素实际上具有class="file-input"，否则什么都不会起作用。

<label><input type="file" class="file-input" name="receipt[]" /><span>UPLOAD SALES RECEIPT*</span></label>

现在，通过将change事件的观察委托给document（或一些合适的更接近的容器），原始的原型file-input元素和任何未来的克隆都可以被赋予所需的行为。一个快速的打击：

$("document").on('change', ".file-input", function(e) {
    $(this).closest((".transactionalFormRow"))
        .find('label span')
        .text(e.target.value.split( '\\' ).pop() || labelVal);
});

有了这个代表团，克隆过程非常简单：

$("#addproduct").on('click', function(e) {
    e.preventDefault();
    $(this).prev(".transactionalFormRow")
        .clone().insertBefore(this)
        .find("label span").text('UPLOAD SALES RECEIPT*');
});

jQuery克隆元素未更新目标信息

3 个答案: