导读:方法一: 在隐藏的文件输入框上调用click()方法,方法二:用label
方法一: 在隐藏的文件输入框上调用click()方法
隐藏掉默认的的文件输入框 <input> 元素,使用自定义的界面来充当打开文件选择对话框的按钮。要使用样式 display:none 把原本的文件输入框隐藏掉,然后在需要的时候调用它的click()方法就行了。
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">选择文件</a>
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click(); // jQuery可以使用 trigger()
}
e.preventDefault(); // prevent navigation to "#"
}, false);
方法二:用label
隐藏input,把样式写到label上,点击label就是对input进行操作。
Demo3
<input id="img_input2" type="file" accept="image/*"/>
<label for="img_input2" id="img_label2">选择文件
<i class="fa fa-plus fa-lg"></i>
</label>
<div id="preview_box2"></div>
#img_input2 {
display: none;
}
#img_label2 {
background-color: #f2d547;
border-radius: 5px;
display: inline-block;
padding: 10px;
}
#preview_box2 img {
width: 200px;
}