首页 > 其他分享 >关于layui的单图片上传遇坑-field-input-name问题解决

关于layui的单图片上传遇坑-field-input-name问题解决

时间:2024-04-07 15:23:05浏览次数:13  
标签:function name 遇坑 layui upload demo var 上传

直接上代码

注意field: 'ymftimage'

 
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  var element = layui.element;
  var $ = layui.$;
  // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: 'addymftupload', // 实际使用时改成您自己的上传接口即可。
    field: 'ymftimage' ,// 设置文件域的字段名
    before: function(obj){
      // 预读本地文件示例,不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接(base64)
      });
      
      element.progress('filter-demo', '0%'); // 进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){
        
      // 若上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      // 上传成功的一些操作
      // …
      $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
    },
    error: function(){
      // 演示失败状态,并实现重传
      var demoText = $('#ID-upload-demo-text');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    },
    // 进度条
    progress: function(n, elem, e){
      element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });

});
 


标签:function,name,遇坑,layui,upload,demo,var,上传
From: https://www.cnblogs.com/79524795-Tian/p/18119121

相关文章

  • 环境配置——已解决ModuleNotFoundError: No module named ‘cv2’(python)
    一、报错代码在网上搜到不少用Python处理图形的代码,于是复制别人的代码直接运行却报错,得到的结果却是:已解决ModuleNotFoundError:Nomodulenamed‘cv2’。(当时心里瞬间凉了一大截,最后顺利解决了,顺便记录一下希望可以帮助到更多遇到这个bug不会解决的小伙伴),代码如下:impor......
  • utilseq.h:92:30: error: ‘Iefp’ is not a class or namespace
     001、问题,make编译报错如下:utilseq.h:92:30:error:‘Iefp’isnotaclassornamespace 002、感觉像是c++版本低造成的测试一下,将gcc编译器有4.8升级到11,问题解决。升级方法:https://www.cnblogs.com/liujiaxin2018/p/16744442.html(base)[root@pc1src]#gcc......
  • 关于LayuiAdmin单页版 点击 生成新的 tab标签页
    挠头一小时,解决一秒钟直接上代码html<buttonclass="layui-btnlayuiadmin-btn-useradmin"id="openNewTabBtn">添加</button>js layui.use(['element','table','jquery'],function(){ var$=layui.$ var......
  • layui多选xm-select
    直接上代码xm-select.js下载地址https://pan.baidu.com/s/1YXDsr9tn8EOeX0vEzPwGdQ?pwd=nvdv提取码:nvdv第一步:下载第二步:引入xm-select.js第三步:写一个`<divid="demo1"></div>`第四步:渲染 vardemo1=xmSelect.render({ el:'#demo1', language:'......
  • 03-Java框架FTPClient 使用rename()移动文件和文件重命名
    1需求由于业务种种原因,现在需要将ftp中已存文件移动到其它文件夹。2初始策略一开始走上弯路,直接翻看FTPClientAPI有无move方法,但没发现:于是曲线救国,想着采用先复制、再删除,伪代码:InputStreaminputStream=ftpClient.retrieveFileStream("/AAA/test.txt");ftpClient.st......
  • layui table 根据某个栏位值隐藏某列
    需求:如果是新建的单据,就不允许进行勾选;如果打开之前建立的旧单,就可以进行勾选。 假设前面增加的选择项的部分是{field:'index1',checkbox:true,......
  • 解决 WebStorm 粘贴 JSX 时自动将 class 改为 className 的问题
    参考:解决复制时class自动改为className的问题将该选项取消勾选:File=>Settings=>Editor=>General=>SmartKeys=>JavaScript=>ConvertHTMLwhenpastingintoJSXfiles。......
  • NSLOOKUP如何查询网站的cname
    nslookup的语法为:nslookup–qt=类型目标域名(注意qt必须小写)使用nslookup查询网站的cname,如查询www.taobao.com的cname:nslookup-qt=cnamewww.taobao.com 如需查询其他类型的信息只需在语句里替换类型即可。类型主要有:A地址记录(Ipv4)AAAA地址记录(Ipv6)CNAME......
  • Wpf Beginstoryboard Storyboard DoubleAnimation Storyboart.TargetName,Storyboary.
    <Windowx:Class="WpfApp32.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.......
  • JavaScript库,编写$()和getElementsByClassName()方法
    背景:JavaScript库是一组预先编写好的JavaScript代码集合,旨在简化常见的网页开发任务。这些库通常包含了许多函数和方法,可以帮助开发人员处理各种任务,比如DOM操作、事件处理、动画效果、AJAX请求等等。使用JavaScript库可以节省开发时间,并提供了一种标准化的方法来解决常见的......