在网站应用程序中创建一个选择工具，例如在 OneDrive 中

Create a select tool in a website application like the one in OneDrive

本文关键字：工具 选择 OneDrive 一个 应用程序 网站 创建      更新时间：2023-09-26

我正在制作一个像oneDrive这样的网络应用程序现在我想添加这个选择功能，但我不知道从哪里开始或做什么

如果有人对此有扩展或演示，请告诉我我一直在寻找 2 天，但从未找到任何东西这是我想要的：

在此处输入图像描述

简单地把它放在一个表格中

<input type="file" multiple />

使用 Ctrl 选择多个文件并在服务器端处理请求

或者，也许您想要比简单的选择工具更好的东西。例如，允许您拖放多个文件的拖放区。只需将其放入您的页面即可。

<div id="drop_zone">Drop files here</div>
<output id="list"></output>
<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }
  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

如果需要帮助，：

。绘制选择 - 矩形并将所选项目放入数组中

把它放到你的页面中：

<input type="file" id="files" name="files[]" multiple />
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object - here your Array
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        var fd = new FormData();
        fd.append('file', f); // - here your file
        $.ajax({ // - here you can for example send your file with AJAX one by one
            type: "POST",
            url: "your_example_url",
            data: fd, // -this is your one file from array
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data, textStatus, request) {
            }
        });
    }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
相关文章：