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

Question

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

因此，我正在寻找 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>

Answer 1

您可以参考以下内容URL：

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

Answer 2

对于每个文本框，您可以围绕某些父项定义拖放区 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;

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

text input get filename on drop

javascript

jquery

filenames

input