javascript - 如何将上传文件的名称设置为输入类型:html中javascript上的文本
问题描述
我想向我的 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 的值。任何帮助,将不胜感激。
解决方案
像下面这样的东西?
$("#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>
推荐阅读
- python-2.7 - 使用 pip 安装的软件包是否根据 python 配置更改?
- c# - 如何将类属性绑定到数据模板生成的项目
- vue.js - 页面刷新后 vue-router 不会停留在同一页面上
- python - HTTP客户端:当一个域有多个A记录时该怎么办?
- java - 屏幕截图:RasterFormatException(y+ 高度)在 Raster 之外
- python - 如果网站在后端加载产品但尚未向公众发布,我可以访问该信息吗?
- php - 使用 docker-compose 构建容器时出现“php_network_getaddresses: getaddrinfo failed: Temporary failure in name resolution”错误
- unix - 在 makefile 中同时运行一些操作
- python - 是否可以使用已导入的某些包运行 ipython?
- php - 解析页面以获取输入,然后提交包含此输入值的帖子