Question

我使用onclick的常规按钮激活type = file按钮并正常工作，因为它成功打开选择文件菜单然后选择一个文件，但它没有说文件的名称任何地方。有没有办法做到这一点？

<div class="div-table" align="center">
    <form method="post" enctype="multipart/form-data" action="">
        <div class="div-table-row" align="center">
            <div class="div-table-col" align="right"> Upload Doc File:   </div> 
            <div class="div-table-col" align="left">
                <input type="button" id="my-button" value="Select Doc File" class="button" >
                <input type="file" name="file" id="file" src="#" onchange="getFilePath())">
            </div>
            <script> 
                $('#my-button').click(function(){
                    $('#file').click();
                });
            </script>
        </div>

我只想弹出并显示按钮旁边的文件名或其他内容，以便用户知道文件已被选中。感谢

Answer 1

如果我理解正确，您希望在提交文件之前获取您为上传选择的文件的名称？

$('input:file#avatar').change(function () {
    var file_name = $(this).val();
    if (file_name.length > 10) {
        file_name = file_name.substring(0, 10) + '...';
    }
});

file_name就是您所需要的。

Answer 2

您好我已经尝试过这段代码 - 希望这会有所帮助

    <form action="" method="POST" type="multipart/form-data">
    <input type="file" name="file" id="filename" style="display:none;" onchange="getPath()">
    <input type="button" value="Upload File" onclick="openpath()">
</form>
<div id="display"></div>

<script>
var inputName = document.getElementById('filename');
var dis = document.getElementById('display');

function openpath(){
    inputName.click();
}

function getPath() {
     var imgPath;

     imgPath = inputName.value;
     imgPath = imgPath.replace("C:\\fakepath\\", "");
     dis.innerHTML = imgPath;

}

</script>

Answer 3

如果你想在按钮之后添加文件名就像实际的浏览按钮一样，你可以这样做（对不起，我不是jquery）：

document.getElementById('file').addEventListener('change', function() {
  var fn = '<span>' + this.value.replace(/^.*?([^\\\/]*)$/, '$1') + '</span>';
  document.getElementById('my-button').insertAdjacentHTML('afterend', fn);
}, false);

从type = file按钮打印文件名

3 个答案: