一般在项目中不会运用默认的input样式,因此我们通常的解决方案是
在一个事件(比如点击图片)内使用input file的click()。主动触发click(),弹出文件选择。
let uploadInput = $('.upload input');
//jQuery委托 .clsPhoto的点击事件
$('.imgWrapper').on('click', '.clsPhoto', function () {
uploadInput.trigger('click'); //弹出文件选择
});
然后给文件选择绑定onchange 事件,当值改变时,上传文件,最后将input的value值设置为‘’或null;
uploadInput.on('change', function () {
'use strict';
$('.upload button').click();
this.value = '';
});
但是这样的话就会有另外的缺点:
当没有文件上传时,无法做到提示。因为文件上传是写在input的change事件上的,所以在每次上传之后,value的 值都是空。
因此第二次没有选中图片的话。不会触发change事件。