使用 JS 为隐藏的文本输入赋值答案

【问题标题】：Assign value to an hidden text input with JS使用 JS 为隐藏的文本输入赋值
【发布时间】：2017-06-02 09:05:17
【问题描述】：

我是 JavaScript 的新手。

我有这个：

HTML：

<form>
<t:inputFileUpload required="true" id="upload" onchange="uploadOnChange()" />
<input id="filename" type="hidden" />
<h:commandButton class="btn btn-primary" value="Upload"
            action="#{controller.upload}" />
</form>

javascript：

<script>
function uploadOnChange() {

document.getElementById('upload').onchange = name;

var filename = name;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);

document.getElementById('filename').value = filename;
}
</script>

我要做的就是通过一个 inputFileUpload 来浏览我的目录，我选择的文件名，并将这个名称作为字符串传递给 jsf 控制器。

有人可以帮助我吗？

编辑：

如果我添加到我的表单 enctype="multipart/form-data 似乎控制器方法“上传”什么都不做。

【问题讨论】：

这似乎不对：document.getElementById('upload').onchange = name;
about uploading with javascript 也许这可以帮助您解决问题。
您也是 JSF 新手吗？ JSF 需要 <h:form> 而不是 <form> 才能正常工作。 t:inputFileUpload 将传递文件名...无需在单独的字段中执行此操作...我认为您正在尝试以错误的方式解决另一个问题
是的，我也是 jsf 的新手，我还在上高中 :)...如果我使用
无论如何都不起作用。
我已经尝试过这样做：我已经输入了multipart/form-data 的表格，而不是在我的控制器中我尝试过file.getfileName() 但它不起作用......所以我正在寻找另一种方式...

标签： javascript jsf

【解决方案1】：

假设<t:inputFileUpload> 有一个value 属性，我会将代码更改为这样的：

function uploadOnChange() {
  var filename = document.getElementById('upload').value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
    document.getElementById('filename').value = filename;
  }
  console.log('Value hidden input: ' + document.getElementById('filename').value);
}

<input type="file" required="true" id="upload" onchange="uploadOnChange()" />
<input id="filename" type="hidden" />

【讨论】：

我要为 inputFileUpload 添加什么值？我只需要选择我想要的名称的文件....我很抱歉，我很不专业。
您不需要添加它，它应该在那里，或者可能使用其他名称。您应该能够以某种方式从inputFileUpload 获取文件名。
@alex 添加了一个带有标准 HTML 文件上传控件的可运行 sn-p 作为示例。
非常感谢，但我可以将文件名值返回给我的 jsf 控制器类以使用该字符串吗？我已将隐藏输入值分配为 value="#{controller.file}"
我是 .NET 开发人员，这是一个 JS 问题。你必须自己弄清楚，或者用正确的标签问另一个问题。