html标签部分
<div id="uploadDiv" class="weui-uploader__input-box"></div>
<div id="fileDiv" style="display: none"></div>
js 部分
$(function() {
$("#uploadDiv").on("click",function(){
var uploadFile = '<input name="files" id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>';
$("#fileDiv").append($(uploadFile));
$("#uploaderInput").bind("change",function(e){
//可以做一些其他的事,比如图片预览
$(this).removeAttr("id");
});
$("#uploaderInput").click();
});
思路大致是点击第一个div就创建一个input并绑定change事件,然后将这个input对象加入到第二个div中同时触发input对象的click事件来选取需要的文件。
注意:第二个div是不可见,不然一堆的<input type=“file”>会很难看的。
要在change事件中移除创建的input对象的id属性,如果不移除你会看到很有意思的现象的。
效果如图(当然图是加了样式做了预览的)