文本输入在放置时获取文件名答案

【问题标题】：text input get filename on drop文本输入在放置时获取文件名
【发布时间】：2020-06-29 07:41:55
【问题描述】：

我有一个 html 表单来编写一些文件名，但是只在表单中为我将在表单中提交的所有内容编写每个文件名有点蹩脚。所以我想到了一个更好的主意，那就是只拖动我的文本输入顶部的文件名，然后文本输入的值更改为文件名。我知道我可以在输入的 type 属性中指定文件，但那是为了上传文件。我不想上传任何东西。我只想获取文件名，这就是我输入文本的原因。

所以，我正在寻找 jQuery 或 Javascript 来解决这个问题。不幸的是，我没有很多代码可以分享，但我展示了一个表单示例。我知道这会不受欢迎，因为我不共享任何 javascript 代码，但我什至不知道从哪里开始，这是我知道的唯一可以找到的地方。所以我很抱歉。

但这里是html表单示例

<form action="somefile.php" method="POST">
    <input type="text" name="mpqfile" placeholder="mpq filename">
    <input type="text" name="sqlfile" placeholder="sql filename">
    <input type="text" name="objfile" placeholder="obj filename">
    <input type="text" name="m2file" placeholder="m2 filename">
    <input type="text" name="skinfile" placeholder="skin filename">
    <input type="submit" value="send">
</form>

【问题讨论】：

如何拖动文件名？它是否在计算机上的某个地方可用，并且您希望将其选择并放入输入中？
@AlwaysHelping 是的，这是正确的。这些文件在我的电脑上，我想将它们从我电脑上的文件夹拖到网站的输入中，以获取输入中的文件名

标签： javascript jquery input filenames

【解决方案1】：

对于每个文本框，您可以在某些父 DIV/Container 周围定义拖放区。

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

您可以在放置处理程序中使用 ev.dataTransfer.files[i].name 访问文件名。获得文件名后，您可以将相应文本框的值设置为文件名。

document.getElementsByName("mpqfile").value = filename;

【讨论】：

我只能让它为 1 个输入工作。但如上表所示，还有更多的输入。所以我仍然遇到一些麻烦，但我很感谢你提供的信息，它至少为我指明了正确的方向
您能否识别出必须从文件名写入值的文本框？如果是...您可以在所有文本框周围创建一个拖放区，并根据文件名将值写入相应的文本框中。用户将能够一次拖动多个文件，并且在放置处理程序中，您可以遍历所有文件、查找文件名、识别文本框并将值写入相应的文本框中。
我找到了解决方案。我编辑了函数以获取 2 个值。在它是 ondrop="dropHandler(event); 之前，我将其更改为 ondrop="dropHandler(event, 'mpqfile');获取输入的 id。我尝试使用 this.getAttribue("id"); 获取 id但这并没有真正奏效......但现在我得到了一切工作。谢谢。我现在可以重做它并让它变得更好

【解决方案2】：

您可以参考以下网址：

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

【讨论】：