我在这段代码中使用了两个函数。用户可以点击＆＃34; +＆＃34;上传图片。按钮。他们也可以通过点击＆＃34; - ＆＃34;删除图像。按钮。但文件上传功能不适用于新行。用户无法选择任何文件，这些文件不会显示在html中。 请检查我的jsfiddle链接并帮助我。 https://jsfiddle.net/mhmdsohail/6mee3L8t/14/
var max_fields3 = 10; //maximum input boxes allowed
var wrapper3 = $("#portfoliodocs"); //Fields wrapper
var add_button3 = $(".addmore_doc"); //Add button ID
var x = 1; //initlal text box count
$(add_button3).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields3) { //max input box allowed
x++; //text box increment
$(wrapper3).append('<div class="form-group label-floating is-empty onerow portwidth2"><div class="socialmediaside2"><input type="text" class="form-control" name="portfoliodoctitle[]" maxlength="10" value="" placeholder="Document Title"><div class="jFiler jFiler-theme-default"><input type="file" class="docupload" name="portfoliodoc[]" accept="application/pdf, application/doc, application/docx" style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;"><div class="jFiler-input"><div class="jFiler-input-caption"><span>Choose files To Upload</span></div><div class="jFiler-input-button">Choose Files</div></div></div></div><button type="button" class="btn btn-default btn-sm bckbtn remove_field3"><i class="fa fa-trash-o" aria-hidden="true">-</i></button></div>'); //add input box
}
});
$(wrapper3).on("click", ".remove_field3", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
-------------------------------------------
$('.docupload').filer({ //I have to change in here
limit: 12
, maxSize: 2
, fileMaxSize: 1
, extensions: ["jpg", "png", "gif"]
, showThumbs: true
, addMore: true
, allowDuplicates: false
, canvasImage: true
, templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>'
, item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-thumb-overlay">\
<div class="jFiler-item-info">\
<div style="display:table-cell;vertical-align: middle;">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
</div>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>'
, itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-thumb-overlay">\
<div class="jFiler-item-info">\
<div style="display:table-cell;vertical-align: middle;">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
</div>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>'
, progressBar: '<div class="bar"></div>'
, itemAppendToEnd: false
, canvasImage: true
, removeConfirmation: true
, _selectors: {
list: '.jFiler-items-list'
, item: '.jFiler-item'
, progressBar: '.bar'
, remove: '.jFiler-item-trash-action'
}
}
, dialogs: {
alert: function (text) {
return alert(text);
}
, confirm: function (text, callback) {
confirm(text) ? callback() : null;
}
}
, captions: {
button: "Choose Files"
, feedback: "Choose files To Upload"
, feedback2: "files were chosen"
, drop: "Drop file here to Upload"
, removeConfirmation: "Are you sure you want to remove this file?"
, errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded."
, filesType: "Only Images are allowed to be dddduploaded."
, filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB."
, filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
答案 0 :(得分：1)
这可能是因为filer初始化只是将其函数绑定到$('.docupload')选择器执行时的结果。因此，您之后添加的任何.docupload元素都没有绑定filer个函数。尝试在add事件中移动filter初始化，因此无论何时添加新文件上传项，该函数都会绑定到新创建的html元素。
答案 1 :(得分：-1)
您需要使用现有的HTML而不是在jquery中编写新的html。 请在jquery和javascript中查看克隆。
$(wrapper3).append($('#portfoliodocs .form-group').first().clone(true)); //add input box
只需克隆现有节点并附加在父节点中。
Here我更新了您的代码。