Kenneth的部落格

IE出於安全性的考慮，上傳檔時必須要點擊<input type=’file’>控制項本身才能上傳成功。而因為<input type=’file’>長的實在太醜，很少能滿足我們的審美，我們通常都是會隱藏它，然後用其他的button去觸發它。而這麼做在IE9下是不被允許的。

至于解决方法，只有用CSS來達成的，我的作法是把upload or <input type='file'> 弄成透明的蓋在DIV上，也就是應用z-index 用法。 為什麼會針對IE9呢?

因為IE10之後的版本有fileReader function 可用。

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

<divid="mybutton"><inputtype="file"id="myfile"name="upload"/>
  Click Me!
</div>

CSS:

div#mybutton {/* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;/* SOME STYLING */
  width:50px;
  height:28px;
  border:1px solid green;
  font-weight: bold
  background: red;}

div#mybutton:hover {
  background: green;}

input#myfile {
  height:30px;
  cursor: pointer;
  position: absolute;
  top:0px;
  right:0px;
  font-size:100px;
  z-index:2;

  opacity:0.0;/* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0);/* IE lt 8 */-ms-filter:"alpha(opacity=0)";/* IE 8 */-khtml-opacity:0.0;/* Safari 1.x */-moz-opacity:0.0;/* FF lt 1.5, Netscape */}

JavaScript:

$(document).ready(function(){
    $('#myfile').change(function(evt){
        alert($(this).val());});});