时间戳

首页 > 解决方案 > 如何检索已上传到 FilePond 表单上的文件的路径

javascript - 如何检索已上传到 FilePond 表单上的文件的路径

问题描述

帮助！！！

我一直在努力寻找如何检索已上传到 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 表单的文件的路径

谢谢， 阿纳夫

标签： javascripthtmlimage-processingfilepond

解决方案

据我所知，这是不可能的，浏览器根本不公开文件路径信息。https://github.com/pqina/filepond/issues/254#issuecomment-475181033

如果您有/找到显示其他资源的资源，我很乐意调整代码库以使文件项包含路径信息。

推荐阅读