Html
<div class="weui_cells " id="ordersView">
<script type="text/html" id="ordersTpl">
{{# if (item.zhifufssjz === '2') { }}
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<a href="javascript:void(0);" class="file">上传购买凭证
<input id="file" class="weui_input upload" type="file" accept="image/*" name="file"/>
</a>
</div>
<div class="weui_cell_ft ">
<img id="Img" style="height: 50px;">
</div>
</div>
{{# } }}
</script>
</div>
<!--文件上传按钮-->
<button type="button" style="display: none;" class="layui-btn" id="fileUploadAction">开始上传</button>
关键代码:
<input id="file" class="weui_input upload" type="file" accept="image/*" name="file"/>
JS
/**
* Created by SummerGao on 16-11-7.
*/
layui.use('upload', function () {
var upload = layui.upload;
$(document).on('change', '.upload', function () {
//上传接口
var url = uploadServerPathWeChat+ "file/upload/receipt/receipt/receipt?isWeChat=1";
//执行实例
upload.render({
elem: '#' + $(this).attr('id')//绑定元素
, url: url
, accept: 'images'
, multiple: false
, auto: false
, bindAction: '#fileUploadAction'
, before: function (obj) {
lay.msg("文件上传中....")
}
, done: function (res) { //上传完毕回调
}
, error: function () { //请求异常回调
}
});
//鼠标点击事件执行附件上传操作
$("#fileUploadAction").click();
});
});
关键代码:
$(document).on('change', '.upload', function () {
});
如果你的是下面这种写法会不起作用
$(".upload").on('change', function () {
});
>> $(".upload").on('change', 只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事件的
>> 而$(document).on('change', "指定的元素",function(){});方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件