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中（文件没有上传！）......

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

2 个答案: