AI 助理
备案控制台
开发者社区 云计算 文章 正文

layui上传图片

2023-09-16 57
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： layui上传图片 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>layui上传图片</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
  <script src="https://www.layuicdn.com/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style type="text/css">
    .imgDiv{
      width: 100px;
      height: 100px;
      position: relative;
      float: left;
      margin-right: 15px;
    }
    .remove{
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 4px;
      background-color: #000;
      color: #fff;
      border-radius: 100px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="layui-upload upload">
    <div id="" style="overflow: hidden;">
      任务确认单
      <button type="button" class="layui-btn" id="upload1">
        <i class="layui-icon">&#xe67c;</i>上传图片6
      </button>
      <input  class="layui-upload-file" type="file" accept="" name="file">
      <div class="layui-upload-list">
        <div class="" id="demo1"></div>
      </div>
    </div>
    <br />
    <div id="" style="overflow: hidden;">
      任务完成证明
      <button type="button" class="layui-btn" id="upload2">
        <i class="layui-icon">&#xe67c;</i>上传图片7
      </button>
      <input  class="layui-upload-file" type="file" accept="" name="file">
      <div class="layui-upload-list">
        <div class="" id="demo2"></div>
      </div>
    </div>
    <br />
    <div id="">
      <button type="button" class="layui-btn" id="cancelImg" style="background: #d8d9d9;color: #333;">取消</button>
      <button type="button" class="layui-btn" id="putinImg">提交</button>
    </div>
  </div>
  <!-- <div class="imgDiv"><img src="" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div> -->
  <script>
      layui.use(['laypage', 'layer', 'upload'], function () {
          var laypage = layui.laypage  //设置配置环境
              , layer = layui.layer
              , upload = layui.upload
          //上传图片
      var shuzu1 = [];
          var uploadInst = upload.render({
              elem: '#upload1'
              , url: 'http://totaltest.rdssrqf.com/upload/uploadImages' ,//改成您自己的上传接口
        multiple: true  //删除就可以单传
              , before: function (obj) {
                  //预读本地文件示例，不支持ie8
                  obj.preview(function (index, file, result) {
                      // $('.demo1').attr('src', result); //图片链接（base64）
            // $('#demo1').append('<img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px">');
            // $('#demo1').append('<div class="imgDiv"><img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>');
                  });
              }
              , done: function (res) {
                  //如果上传失败
                  if (res.code > 1000) {
                      return layer.msg('上传失败');
                  }else{
            $('#demo1').append('<div class="imgDiv"><img src="'+ res.url +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>');
            shuzu1.push(res.url)
            // console.log(shuzu1,'78')
            // $("#img11").val(shuzu11)
            return layer.msg('上传成功');
          }
                  //上传成功
              }
              , error: function () {
                  //演示失败状态，并实现重传
                  // var demoText = $('#demoText');
                  // 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();
                  // });
              }
          });
      var shuzu2 = [];
      var uploadInst = upload.render({
          elem: '#upload2'
          , url: 'http://totaltest.rdssrqf.com/upload/uploadImages' ,//改成您自己的上传接口
        multiple: true  //删除就可以单传
          , before: function (obj) {
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {
                  // $('.demo1').attr('src', result); //图片链接（base64）
            // $('#demo1').append('<img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px">');
            // $('#demo2').append('<div class="imgDiv"><img src="'+ result +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>');
              });
          }
          , done: function (res) {
              //如果上传失败
              if (res.code > 1000) {
                  return layer.msg('上传失败');
              }else{
            $('#demo2').append('<div class="imgDiv"><img src="'+ res.url +'" alt="" class="layui-upload-img" style="width:100px;height:100px" /><span class="remove">×</span></div>');
            shuzu2.push(res.url)
            // console.log(shuzu2,'78')
            // $("#img11").val(shuzu11)
            return layer.msg('上传成功');
          }
              //上传成功
          }
          , error: function () {
              //演示失败状态，并实现重传
              // var demoText = $('#demoText');
              // 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();
              // });
          }
      });
      $("body").on('click', '.remove', function(){  //点击删除当前图片
        $(this).parent().remove();
      });
      $("#putinImg").click(function(){
        // map:[{6:url,url,url},{7:url,url,url}]   //这个是传给后台的  map格式
        var shuzu1 = new Array();
        var shuzu2 = new Array();
        var map = new Array();
        $("#demo1 .imgDiv").each(function(){
          shuzu1.push($(this).find('img').attr("src"));
        });
        $("#demo2 .imgDiv").each(function(){
          shuzu2.push($(this).find('img').attr("src"));
        });
        map[6] = shuzu1.toString();
        map[7] = shuzu2.toString();
        console.log(map,'140')
      })
      $("#cancelImg").click(function(){
      })
   }); 
  </script>
</body>
</html>
兜里只有三分钱~
目录
相关文章
程序三两行
|
6月前
|
JavaScript
layui二级联动
layui二级联动
程序三两行
48 1
码上来科技
|
12月前
|
前端开发
layui在上传图片在前端处理图片压缩
layui在上传图片在前端处理图片压缩
码上来科技
144 0
我是咔咔
|
JavaScript
【layui】图片查看器
【layui】图片查看器
我是咔咔
406 0
【layui】图片查看器
讓丄帝愛伱
layui表单验证
layui表单验证
讓丄帝愛伱
261 0
java开发-郭老师
|
6月前
|
JavaScript Java
EasyUi 图片上传
EasyUi 图片上传
java开发-郭老师
42 0
讓丄帝愛伱
layUI表单验证不生效的问题
layUI表单验证不生效的问题
讓丄帝愛伱
167 1
不念那年晚春
|
XML 前端开发 JavaScript
LayUI系列（一）之layui介绍以及登录功能的实现
LayUI系列（一）之layui介绍以及登录功能的实现
不念那年晚春
264 0
兜里只有三分钱~
layUi多图片上传删除
layUi多图片上传删除
兜里只有三分钱~
34 0
我是咔咔
|
JavaScript 前端开发
【Layui】tp5上传图片
【Layui】tp5上传图片
我是咔咔
185 0
【Layui】tp5上传图片
阿里云叶秋
|
前端开发
你对layui的弹出层表单进行表单验证了解多少呢？
我们在项目中使用**layui**做前端的时候，就少不了表单**form**，但也有时候我们会使用**layui**的弹出层`layer.open`，来做一个弹出层表单，该弹出层有自己的**btn**（确定，取消按钮等等），那么如何对弹出层的表单做一个表单验证呢？
阿里云叶秋
654 1
你对layui的弹出层表单进行表单验证了解多少呢？