文档章节

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

SummerGao
 SummerGao
发布于 07/24 09:46
字数 349
阅读 6
收藏 0

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

© 著作权归作者所有

SummerGao
粉丝 4
博文 219
码字总数 84061
作品 0
济南
高级程序员
私信 提问
服务端与客户端共用smarty模板技术

后端渲染的局限性 有些时候,我们总会做一些瀑布流的界面,如下: 在不断的下拉过程中,会动态向其中添加重复的DOM结构,而且,我们也希望同步刷新页面的时候,DOM是直接在服务端渲染好的,而...

侯禹
2016/02/18
211
1
前端集成解决方案--baidu yogurt

yogurt 是基于 fis 扩展针对服务端为 express.js 的前端集成解决方案。 在阅读此文档之前,希望你最好对 fis 有一定的了解。此工具主要负责前端编译与环境模拟,让你更专注、更快速地开发前端...

叶秀兰
2014/07/28
1K
0
编写GO的WEB开发框架 (七): Response封装和模板渲染

WEB应用的处理流程中,获取请求参数,调用业务逻辑处理后,下一步就是响应输出,在GO中,就是向ResponseWriter写数据。 封装常用输出方法 对于常规输出,做一个简单的封装,以简化调用的方式...

TimWong
2016/03/08
152
0
基于koa+fis3+swig前后端isomorphic同构实现

  (认真把这篇文章看完,保证你会学到很多,如果没学到请联系作者或直接报警)   随着前端技术的不断变革,前端从后台吐页面 -> 前端MVC -> mvvm、react -> node直出 ->同构跨端的大致发...

ouven
2016/04/21
506
0
关于fis框架中fis3-smarty语法总结(一)

目录 什么是smarty fis3-smarty模板语法 基础模板框架语法 html、head、style、widget、block、extend 模板专用语法 url、capture 模板框架引用逻辑 什么是smarty Smarty是一个使用PHP写出来...

a1burning
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用ssh工具便于远程管理

前几天亲眼经历了Linux服务器运维过程,眼看着别人熟练运用Linux管理工具,自个心里不是滋味,所以自己特意整理了一篇“专题”:使用ssh服务远程管理主机。 首先在使用ssh服务工具之前,先熟...

linux-tao
10分钟前
2
0
生存还是毁灭?一文读懂挖矿木马的战略战术

前言 比特币等虚拟货币在2019年迎来了久违的大幅上涨,从最低3000美元上涨至7月份的14000美元,涨幅达300%,巨大的金钱诱惑使得更多的黑产团伙加入了恶意挖矿的行列。阿里云安全团队通过对云...

阿里云官方博客
12分钟前
1
0
jQuery中的DOM多样操作

常用状态码及其含义: 404 没找到页面(not found) 403 禁止访问(forbidden) 500 内部服务器出错(internal service error) 200 一切正常(ok) 304 没有被修改(not modified) jQuery中的...

智简
13分钟前
1
0
初学者不会画男头像?男头像怎么画?

人物头像怎样画?男性头像怎样画?学习绘画难吗?怎样才干学好绘画?想必这些都是绘画初学者们经常在想的问题吧,就是不知道如何才干绘画好人物的头像,比如说男性的头像,男性的头像与女人的...

热爱画画的我
14分钟前
1
0
lopatkin俄大神精简中文系统Windows 10 Enterprise 2016 LTSB 14393.729 x64 ZH-CN PIPvm v2

Microsoft Windows 10 Enterprise 2016 LTSB 14393.729 x64 ZH-CN PIPvm v2 评分挺高的 出厂年份:2017 版本:Windows 10 Enterprise 2016 LTSB 14393.729 平台:x64 系统要求: CPU-1 gz R......

xiaogg
14分钟前
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部