解决Layui tpl模板渲染文件上传不起作用

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上，而新产生的元素如果符合指定的元素，那就触发此事件

转载于:https://my.oschina.net/zhenggao/blog/3078162