Question

这在IE中工作正常，但在Chrome中没有？

IE将按下＆＃39;测试＆＃39;打开文件浏览器。或输入字段

但Chrome只会按下＆＃39; test＆＃39;？

打开文件浏览器

 <input id="fileupload" style="display: none;" type="file" name="fileupload">
   <label for="fileupload">
      test
      <input disabled="disabled" id="fil_field" style="cursor: pointer;" placeholder="Choose..">
   </label>

Answer 1

你可以做这样的事情因为输入被禁用了，需要一些工作才能使它看起来准确。

<input id="fileupload" style="display: none;" type="file" name="fileupload"/>
<label for="fileupload">      test
<div style="width:150px;height:21px;background-color:#f3f3f3;border:1px solid  black;cursor: pointer;">Choose....</div>

Answer 2

<强> FIDDLE

http://jsfiddle.net/ut4jedqb/9/

<input id="fileupload" style="display: none;" type="file" name="fileupload"/>

<label for="fileupload">Choose
   <div class="choose">Select file</div>
</label>

CSS

.choose{
cursor: pointer; 
width:200px;
background:#fff;
border:1px solid red;
margin-left:10px;
padding:4px;
}

input,.choose{   
display:inline-block;
}

Answer 3

您的第一个输入标记未关闭，导致文件浏览器在单击标签时打开。

严格来说，输入不应该放在标签内。

我认为最好的选择是在标签周围放置一个元素，输入然后在用户单击此元素时触发事件，然后使用此方法，您可以在jquery中使用click方法。我会使用类似下面的内容：

<input id="fileupload" style="display: none;" type="file" name="fileupload"/>
<div id="fileuploadcontainer">
   <label for="fileupload">test</label>
   <input disabled="disabled" id="fil_field" style="cursor: pointer;" placeholder="Choose..">
</div>  

<script type="text/javascript">
$(document).ready(function(){    
  $('#fileuploadcontainer').click(function(){
    $('#fileupload').click(); 
  }); 
});
</script>

使用输入字段作为标签在Chrome中无效

3 个答案: