文件输入文件名放入文本字​​段

Question

我有一个上传功能，我需要在html中自定义fileinput元素。 我需要隐藏它并用我自己的按钮和文本输入字段替换它。

我的问题是，如何将选择的文件名放入我的自定义文本输入字段作为我隐藏的输入字段的替代？

这是一个初始代码：

<input type="file" accept="image/*" name="sandiganFile" id="sandigan" style="display:none"/>
<input type="text" id="sandiganFilename" />
<button type="submit" id="sandiganBrowse" onclick="$('#sandigan').click()">Browse</button>
<button type="button" id="sandiganUpload" name="sandigansubmit" >Upload</button>

Answer 1

尝试使用.change()对象

的name，File属性

＆＃13;

＆＃13;

$("#sandigan").change(function(e) {
  $("#sandiganFilename").val(this.files[0].name);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" accept="image/*" name="sandiganFile" id="sandigan" style="display:none"/>
<input type="text" id="sandiganFilename" />
<button type="submit" id="sandiganBrowse" onclick="$('#sandigan').click()">Browse</button>
<button type="button" id="sandiganUpload" name="sandigansubmit" >Upload</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如评论中所述，您无法获得完整路径，但只能用于文件名。

jQuery(function($) {
  $("#sandigan").on('change', function() {
    var file = $(this).val();
    $("#sandiganFilename").val(file.split('\\').reverse()[0]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" name="sandiganFile" id="sandigan" style="display:none" />
<input type="text" id="sandiganFilename" />
<button type="submit" id="sandiganBrowse" onclick="$('#sandigan').click()">Browse</button>
<button type="button" id="sandiganUpload" name="sandigansubmit">Upload</button>