我正在使用jquery filepond image uploader插件,它将文件上传变成拖放区。
<input type="file" class="filepond" id="filepond"
name="filepond"/>
下面是初始化文件池的脚本
<script>
$(function(){
// First register any plugins
$.fn.filepond.registerPlugin(FilePondPluginImagePreview);
// Turn input element into a pond
$('.filepond').filepond();
// Listen for addfile event
$('.filepond').on('FilePond:addfile', function(e) {
console.log('file added event', e);
});
});
</script>
我计划在不使用ajax的情况下提交一个表单,它是一个dircect表单提交。
我只是想知道如何获取被拖放的文件名,以便将文件名值分配给另一个隐藏输入,这样我就可以通过form submit直接提交整个表单。
当文件被丢弃时,我已经将事件记录在console.log(“文件添加事件”,e);.
请帮我获取文件池中的文件名。
根据文档,您可以使用FilePond instace事件FilePond:addFile来了解文件何时被拖放。
在事件内部,您可以获得文件,然后您只需要使用filename属性获得名称。
下面是一个使用普通JavaScript的示例:
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);
const pondBox = document.querySelector('.filepond--root');
pondBox.addEventListener('FilePond:addfile', e => {
console.log('file added event', e.detail);
var fileName = pond.getFile().filename;
});