帮助!!!
我一直在努力寻找如何检索已上传到 FilePond 表单上的文件的路径
这是我到目前为止的代码
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
<!--
The classic file input element we'll enhance to a file pond
-->
<!--
The classic file input element we'll enhance
to a file pond, configured with attributes
-->
<input type="file"
class="filepond"
name="filepond"
id="DragInput"
multiple
data-max-file-size="9MB"
data-max-files="3">
<button class="submit_files">Submit</button>
<style>
/**
* FilePond Custom Styles
*/
.filepond {
margin-top: 14px;
margin-bottom: -4px;
}
.filepond--root {
font-size: 11px;
}
.filepond--drop-label {
font-size: 14px;
transform: translate3d(0px, 0px, 0);
opacity: 1;
color: black;
}
.filepond--drop-label {
color: #4c4e53;
}
.filepond--label-action {
-webkit-text-decoration-color: #babdc0;
text-decoration-color: #babdc0;
}
.filepond--panel-root {
border-radius: 2em;
background-color: #edf0f4;
height: 1em;
}
.filepond--item-panel {
background-color: #595e68;
}
.filepond--drip-blob {
background-color: #7f8a9a;
}
</style>
<script>
// We want to preview images, so we register
// the Image Preview plugin, We also register
// exif orientation (to correct mobile image
// orientation) and size validation, to prevent
// large files from being added
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation,
FilePondPluginFileValidateSize
);
// Select the file input and use
// create() to turn it into a pond
FilePond.create(
document.getElementById('DragInput')
);
$('.filepond').on('FilePond:addfile', function(error, file) {
if (error) {
console.log('File Add Error: ' , error);
return;
}
console.log('File Added', file.filename);
});
var handler = function(fieldName, file, metadata, load, error, progress, abort) {
// Custom ajax file upload or local storing here
// Call the error method if something is wrong, should exit after
error('Error occurred');
// Call the progress method to update the progress to 100% before calling load
// Setting computable to false switches the loading indicator to infinite mode
// (computable, processedSize, totalSize)
progress(true, 0, 1024);
// Call the load method when done and pass the returned server file id
// the load method accepts either a string (id) or an object
// the unique server file id is used by revert and restore functions
load('unique-file-id');
// Abort method so the request can be cancelled by user
return {
abort: function() {
// User tapped abort, cancel ongoing actions here
// Let FilePond know the request has been cancelled
abort();
}
};
};
</script>
<!-- file upload itself is disabled in this pen -->
当用户单击提交按钮时,我想要已上传到控制台中列出的 FilePond 表单的文件的路径
谢谢, 阿纳夫