使用现有的 HTML 元素/删除文件到拖放文件上传？答案

【问题标题】：Use existing HTML element/remove file into drag and drop file upload?使用现有的 HTML 元素/删除文件到拖放文件上传？
【发布时间】：2013-01-18 06:43:41
【问题描述】：

我正在尝试找到一种方法，可以将由页面上的 HTML 元素表示的远程文件拖到拖放文件上传框。拖放文件上传的默认功能是接受来自外部浏览器的输入，使用浏览对话框或在区域内拖动文件，但我不确定是否有实现允许从表示浏览器页面内部文件的元素输入。

我正在使用plupload，但如果另一个插件支持该功能，我很想听听。 编辑添加：关于 plupload 是否支持这一点的见解将非常有帮助，因为它是项目规范的一部分。 这里对 JS 不是很了解。我希望这个描述能清楚地表达出来，一直在试图寻找这个，但似乎什么都没有出现。 :)

【问题讨论】：

【解决方案1】：

https://github.com/blueimp/jQuery-File-Upload/wiki

除了拖放/浏览之外，它还允许您“手动”将文件添加到上传队列（因此您可以在某些 html 元素中设置属性数据文件，然后访问这些并将它们添加到队列中）但是您'LL需要用JavaScript弄脏您的手，这是很棒的插件

注意：imo 首先不使用它提供的 ui/模板系统，而是从基础开始：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

来自 API 页面：

块引用

程序化文件上传

通常，通过文件输入按钮选择文件或将文件拖放到拖放区来调用文件上传。

但是，也可以为支持 XHR 文件上传的浏览器以编程方式上传文件（请参阅浏览器支持）：

  $('#fileupload').fileupload('add', {files: filesList});

第二个参数必须是具有 File 或 Blob 对象的数组（或类似数组的列表）作为 files 属性的对象。其他属性允许覆盖文件上传的选项，例如上传地址：

  $('#fileupload').fileupload('add', {files: filesList, url: '/path/to/upload/handler.json'});

【讨论】：