<form action="" method="POST" enctype="multipart/form-data">
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden" name="file"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
<input type="submit" value="Submit">
</form>
CSS
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
在chrome中,当我上传文件时,文本框中的文件名显示为&#34; c:\ fakepath \ filename&#34;这条路。在mozilla中,文本框中的文件名显示为&#34; filename&#34;。我需要像mozilla一样的输出。我不知道为什么在Chrome中它会像完整路径一样显示出来?如何避免?
答案 0 :(得分:1)
您无法通过任何HACK
这取决于浏览器。
仅返回所选文件的完全限定文件名 启用此设置时。禁用该设置时,Internet Explorer 8用字符串替换本地驱动器和目录路径 C:\ fakepath \以防止不恰当的信息泄露。 为了说明,假设您尝试上传名为的文件 C:\ Users \用户CONTOSO \文件\ file.txt的。当你这样做时,值 value属性设置为c:\ fakepath \ file.txt。
You can't set the value of a file picker from a script; doing something like the following has no effect:
var e = getElementById("someFileInputElement");
e.value = "foo";
此要求已在Internet Explorer 8中实现 - 仅当包含该控件的页面添加到浏览器的可信站点集合时,才会显示该文件的真实路径。 - davidwalsh