Html 设置输入类型的样式="；文件"；。如何显示文件路径？

我一直在尝试设置输入type=“file”字段的样式。 我的按钮是样式化的，但我似乎不知道如何在用户选择要上载的文件时显示文件路径/文件。 外面有人能帮忙吗

<form action="" method="POST" enctype="multipart/form-data">
    <div class="fileupload-buttonbar">
        <label class="file-upload"><span>Upload....</span><input name="uploadfile" type="file"> </label>    
    </div>
</form>

​

我的密码在这里

---

在输入字段中添加一个

change

事件，然后只获取它的

.value

示例（使用jQuery）：

演示：

编辑：由于输入字段是隐藏的，并且文件名是其中的一部分，因此您必须自己在页面上显示

fileName

。

<form action="" method="POST" enctype="multipart/form-data">
     <div class="fileupload-buttonbar">
          <input type="file" name="uploadfile" id="uploadfile" style="display:none" onchange="file_path_display.innerHTML=uploadfile.value"/>
          <span class="file-upload" onclick="uploadfile.click()" ondragdrop="uploadfile.dragdrop()">Upload....</span>
          <div id="file_path_display"></div>
     </div>
</form>

上传。。。。

由于安全原因，与用户操作系统相关的文件本身信息受到保护。您可以获取文件名，但不能获取存储文件的路径。+1到@cimmanon。此外，无论您使用何种样式，请在您想要支持的每个浏览器上彻底检查它，因为不同的浏览器呈现的文件控件彼此非常不同，并且大多数浏览器对如何设置样式都有某种限制。您好。。。完美的我做了一些JS jQuery（document）.ready（函数（$）{$（'input[name=“uploadfile”]）.change（函数（）{var fileName=$（this.val（）；var subfileName=fileName.substring（0,16）+“…”；$（'.#文件标签'）.text（subfileName）；}）；所以它在按钮的“选择文件”标签上显示了文件名。。。谢谢你的帮助。。。。新年快乐！！！

$('input[name="uploadfile"]').change(function(){
    var fileName = $(this).val();
    alert(fileName);
});

<form action="" method="POST" enctype="multipart/form-data">
     <div class="fileupload-buttonbar">
          <input type="file" name="uploadfile" id="uploadfile" style="display:none" onchange="file_path_display.innerHTML=uploadfile.value"/>
          <span class="file-upload" onclick="uploadfile.click()" ondragdrop="uploadfile.dragdrop()">Upload....</span>
          <div id="file_path_display"></div>
     </div>
</form>