好的,所以我猜这就是你要找的。
您正在使用类名来创建文件池,并且由于您使用相同的类进行文件上传,因此会产生问题。
当您希望两个元素彼此独立工作时,请始终使用 ID。
我为文件上传和将其传递给 loadFilePond 函数提供了一个唯一的 ID。
我希望这对你有所帮助。
代码笔
https://codepen.io/hasnentrebdingcodes/pen/mddjXKo
$(function(){
// First register any plugins
$.fn.filepond.registerPlugin(
FilePondPluginImagePreview
);
// Create FilePond element
$(document).on('click', '.fp1', function(e) {
$('.pond1').html(`<input type="file" id="fp-1"
class="filepond"
name="filepondone"
multiple
data-allow-image-edit="false"
data-max-file-size="3MB"
data-max-files="3">`);
loadFilePond('fp-1');
});
// Create second FilePond element
$(document).on('click', '.fp2', function(e) {
$('.pond2').html(`<input type="file" id="fp-2"
class="filepond"
name="filepondtwo"
multiple
data-allow-image-edit="false"
data-max-file-size="3MB"
data-max-files="3">`);
loadFilePond('fp-2');
});
});
// Turn input element into a pond
function loadFilePond(clickedFP) {
$('#'+clickedFP).filepond({
allowMultiple: true,
server:{
process: {
url: '/api'
}
}
});
// Listen for addfile event
$('#'+clickedFP).on('FilePond:addfile', function(e) {
console.log('file added event', e);
});
}
<a href="#" class="fp1">Load FilePond 1</a>
<div class="pond1"></div>
<a href="#" class="fp2">Load FilePond 2</a>
<div class="pond2"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
<!-- include FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<!-- include FilePond plugins -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<!-- include FilePond jQuery adapter -->
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>