如何将上传文件的名称设置为输入类型：html 中 javascript 上的文本

Posted 2023-03-05

【中文标题】如何将上传文件的名称设置为输入类型：html 中 javascript 上的文本

【英文标题】：How to set uploaded file's name to an input type:text on javascript in html

【发布时间】：2020-07-31 12:23:47

【问题描述】：

我想向我的 html 页面添加一个文件上传控件，如下所示。

<input class="form-control valid" id="rptScreenShot" type="text" style="float:left;" runat="server"
                               data-val="true" data-val-maxlength="The field Report Sample must be a string or array type with a maximum length of '600'." 
                               data-val-maxlength-max="600" value="" aria-invalid="false" />
<label class="btn btn-default btn-file">
    Browse <input class="form-control" id="upld_sample1" type="file" name="file_rptsample1" style="display: none;">
</label>

我无法做到的是在用户浏览文件后捕获所选文件并通过 javascript 或 jquery 将其设置为 rptScreenShot 的值。任何帮助将不胜感激。

【参考方案1】：

类似下面的东西？

$("#upld_sample1").on("change", function(e)
  console.log("Fileinfo:", e.target.files[0])
  $("#rptScreenShot").val(e.target.files[0].name)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control valid" id="rptScreenShot" type="text" style="float:left;" runat="server" data-val="true" data-val-maxlength="The field Report Sample must be a string or array type with a maximum length of '600'." data-val-maxlength-max="600"
  value="" aria-invalid="false" />
<label class="btn btn-default btn-file">
    Browse <input class="form-control" id="upld_sample1" type="file" name="file_rptsample1" style="display: none;">
</label>

【讨论】：

但是没有文件的完整路径，如何在点击保存按钮后从用户本地上传到服务器？有办法吗？

所有信息都在e.target.files[0] 中，您的问题只要求输入中的名称

@JesusHamdi 您通常在 JS 中使用 FormData 将上传的文件传递到服务器，文件本身已附加，您不需要路径

抱歉，我在 e.target.files[0] 中看不到完整路径？顺便说一句，感谢您的帮助。

我将创建另一个问题，以便在稍后处理文件后将文件发送到服务器。感谢您的宝贵时间。