html - 如何设置iOS6文件输入控件的样式？

Question

我很高兴文件的文件输入控件终于通过 iOS 6 到达了 iPhone。

但是，显示看起来有点奇怪。有谁知道设置控件样式的方法？

Answer 1

很简单，您可以隐藏元素并触发他们的点击事件。

HTML：

<input type="file" class="uploader" />
<u>Choose file</u>

CSS：

input.uploader {
    visibility:hidden;
    height: 0;
}
u { 
    display: block; 
    margin: 5px; 
    padding: 15px; 
    text-align: center; 
    background: #ddd; 
    border-radius: 6px; 
}

JS（带有 JQuery）：

$('u').click(function(){
    $('input[name=photo]').trigger('click');
});

示例：http: //uploader.gokercebeci.com/

Answer 2

这是适用于 iOS 的 OK 解决方案：

HTML：

<form enctype="multipart/form-data" method="POST" accept-charset="UTF-8">
  <input accept="image/jpeg" name="pic" id="pic" type="file">
  <a onmousedown="myClick();">
  Choose a new picture
  </a>
  <br> 
  <input value="put up the picture" type="submit"> 
</form>

CSS：

#pic {
  display:none;
}

Javascript：

function myClick() {
  document.getElementById('pic').click();
}

或者在 CSSdeck： http ://cssdeck.com/labs/kmyjvuwb

这在当前的 Firefox 和 Chrome 中也可以正常工作，但可惜，在 IE 中不行（文件未上传！）...