【问题标题】：input type file to convert to drag and drop jquery object输入类型文件转换为拖放 jquery 对象
【发布时间】：2015-10-28 11:35:03
【问题描述】：

我最近拼凑了一些代码，允许通过 jquery 将拖放文件上传到我的服务器。现在我正在尝试添加一个带有文件选择输入的表单以使用相同的代码。问题是，我似乎无法将文件选择输入读入兼容的对象。

我的拖放代码在拖放时基本上具有：

var files = e.originalEvent.dataTransfer.files;

然后我将“文件”变量输入另一个函数来处理 jquery/ajax 上传。

当试图让文件输入选择以类似的方式工作时，我尝试了这段代码，但没有运气：

var files = new FormData();
files.append("file", $("#fileselect")[0].files[0]);

fileselect 是我的 id

<input type="file" id="fileselect"></input>

但是当我将此“文件”变量输入现有函数时，我无法读取以下属性：

console.log("file length: " + files.length);

有什么提示可以为我指明正确的方向吗？将不胜感激。

【问题讨论】：

这可能没有帮助。但是已经有图书馆可以做到这一点并且很性感。 blueimp.github.io/jQuery-File-Upload 为什么要重新发明轮子？
啊，是的。有许多 jquery 文件上传和拖放库。由于我已经有一些现有的代码并且对 jquery 的东西相当陌生，我不想通过尝试合并第三方来破坏现有的工作。这样，我的项目就只有 jquery 库了。

标签： jquery ajax file-upload input

【解决方案1】：

我找不到完全实现相同格式的方法，但由于后来的函数只是将数据分配给 FormData 对象，我复制了该函数并对其进行了一些调整，以便我可以将从表单输入中提取的数据转换为FormData 对象，然后再继续我的代码的其余部分，然后我可以在将其转换为 FormData 对象并像往常一样继续之前，使用略有不同的语法读取各种属性：

var file = $("#fileselect")[0].files[0]; //read from file input
var filename = file.name;
var filesize = file.size; //in bytes
var fd = new FormData();
fd.append('file', file);

【讨论】：