随笔 - 18  文章 - 0  评论 - 2  阅读 - 87621

Layui文件上传样式在ng-dialog不显示的问题处理

1.项目业务改动,在一个弹窗页面加图片上传。

2.页面使用angular框架,图片上传使用layui的文件上传组件。

js:

1
2
3
4
5
6
7
8
layui.upload({
    url: '/test/upload.json'
    ,elem: '#test' //指定原始元素,默认直接查找class="layui-upload-file"
    ,method: 'get' //上传接口的http类型
    ,success: function(res){
      LAY_demo_upload.src = res.url;
    }
  });<br>

html:

1
<input type="file" name="file" class="layui-upload-file" id="test">

  官方组件代码,js放到angular的控制器中,文件上传的按钮在弹窗页面显示为空白,点击按钮处,能打开选择文件窗口,无上传操作;

解决处理:

在angular控制器中延迟加载 layui.upload{},弹窗页面显示上传按钮,选择文件有上传操作结果。

延迟加载:

复制代码
$timeout(function(){
        layui.upload({
      url: '/test/upload.json'
      ,elem: '#test' //指定原始元素,默认直接查找class="layui-upload-file"
      ,method: 'get' //上传接口的http类型
      ,success: function(res){
       LAY_demo_upload.src = res.url;
    }
  });
    },100);
复制代码

 

 

posted on   darkcode  阅读(2196)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示