显示文件名因浏览器而异(输入类型=文件)

时间:2014-11-28 07:25:33

标签: javascript html

<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中它会像完整路径一样显示出来?如何避免?

1 个答案:

答案 0 :(得分:1)

您无法通过任何HACK

来控制此问题

这取决于浏览器。

See what MICROSOFT says :

  

仅返回所选文件的完全限定文件名   启用此设置时。禁用该设置时,Internet   Explorer 8用字符串替换本地驱动器和目录路径   C:\ fakepath \以防止不恰当的信息泄露。   为了说明,假设您尝试上传名为的文件   C:\ Users \用户CONTOSO \文件\ file.txt的。当你这样做时,值   value属性设置为c:\ fakepath \ file.txt。

MDN

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