TechOverflow Logo
TechOverflow

如何添加 JS 拖放文件上传而无需任何依赖

English Deutsch 简体中文

问题：

对于你的新 Web 应用程序，你想添加拖放文件上传而不使用任何外部库。

解决方案

你可以使用这组函数，你可以将其适应你的应用程序。

dragdrop_upload.js
/**
 * 为 DOM 元素初始化拖放事件处理。
 * DOM 元素不必为空才能执行此操作。
 * @param elem 可以拖放文件的 DOM 元素
 * @param callback callback(files) 函数，当文件被拖放时传递文件列表。
 *
 * 基本用法示例：
 *  var elem = document.getElementById('mydiv');
 *  initializeDragAndDrop(elem, function(files) {
 *      for (var i = 0; i < files.length; i++) {
 *          // 对 files[i] 做些处理...
 *          handleUploadedFile(files[i]); // 替换为你的代码
 *      }
 *  });
 */
function initializeDragAndDrop (elem, callback) {
    elem.addEventListener('drop', function (event) {
        _dragndrop_preventDefault(event);
        callback(event.dataTransfer.files);
    }, false);
    elem.addEventListener('dragover', _dragndrop_preventDefault, false);
    elem.addEventListener('dragdrop', _dragndrop_preventDefault, false);
    elem.addEventListener('dragenter', _dragndrop_preventDefault, false);
    elem.addEventListener('dragleave', _dragndrop_preventDefault, false);
}

/**
 * 内部实用函数，阻止给定事件的默认处理。
 */
function _dragndrop_preventDefault (event) {
    event.stopPropagation();
    event.preventDefault();
}

用法示例：

dragdrop_usage.js
var elem = document.getElementById('mydiv');
initializeDragAndDrop(elem, function(files) {
    for (var i = 0; i < files.length; i++) {
        // 对 files[i] 做些处理...
        handleUploadedFile(files[i]); // 替换为你的代码
    }
});

注意你只需要在相应的 DOM 元素（在此示例中为 mydiv）加载后运行 initializeDragAndDrop。例如，如果你使用 jQuery，你可以这样调用它：

dragdrop_jquery_init.js
$(document).ready(function() {
    initializeDragAndDrop(/* ... */);
});

纯 Javascript（无 jQuery）：

dragdrop_onload_init.js
// 警告：这将替换当前设置的任何 window.onload 函数。
// 此外，这只有在页面上所有内容加载完毕后才会触发，
// 这可能不是期望的行为。
window.onload = function() {
    initializeDragAndDrop(/* ... */);
};

如果需要，另请参见此之前的 TechOverflow 文章了解如何将上传的文件读入内存。

Check out similar posts by category: Javascript