解决IOS无法触发input:file的click事件

当你看到这篇文章的时候，你应该跟我一样也正在为这件事而头疼。

因为，用这种方法完全不能起作用：

html

<div class="upload"> 上传照片 </div>

<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">

js:

$('.upload').click(function(){

$('#inputImage').click();

// return $('#inputImage').click();

//以上2种都无效。

})

而写下这篇文章，是因为博主也体会过现在你的心情。

废话打止。下面看正文。

CSS

.upload {

cursor: pointer;

display: block;

width:100px;

height:100px;

line-height:100px;

position: relative;

text-align: center;

overflow: hidden;

}

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

overflow: hidden;

clip: rect(0,0,0,0);

white-space: nowrap;

border: 0;

margin: -1px;

}

HTML

方法一：
<label class="upload">
    上传照片
    <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
</label>
方法二：
<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
<label class="btn-image-all" οnclick="document.querySelector('#inputImage').click()">替换</label>

没错，就只要这样就能实现了。利用了label标签的特性。

如果有解决你的问题，不妨点个赞个留言吧！！！O(∩_∩)O