layui框架下图片上传、预览，html+javaScript

最新推荐文章于 2024-05-25 22:39:08 发布

Admin_ghost

最新推荐文章于 2024-05-25 22:39:08 发布

阅读量457

点赞数

文章标签： upload javascript html js layui

本文链接：https://blog.csdn.net/qq_54431167/article/details/116858149

版权

1、单图片预览上传

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
  <div style="width: 95px;">
    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
      <div class="layui-progress-bar" lay-percent=""></div>
    </div>
  </div>
</div>

  var uploadInst = upload.render({
    elem: '#test1'
    ,url: ' ' //自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
      element.progress('demo', '0%'); //进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功的一些操作
      $('#demoText').html(''); //置空上传失败的状态
    }
    ,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();
      });
    }
    //进度条
    ,progress: function(n, index, e){
      element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });

2、多图片上传

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：
    <div class="layui-upload-list" id="demo2"></div>
 </blockquote>
</div>

  upload.render({
    elem: '#test2'
    ,url: ' ' //改成自己的上传接口
    ,multiple: true  //是否多文件
    ,accept: 'file' //上传文件类型，普通文件file、视频video 、音频audio
    ,exts: 'png' ///允许上传的文件后缀，压缩文件zip|rar|7z、图片png|jpg
    ,size: 1024//限制文件大小，单位 KB
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
      //上传完毕
    }
  });

3、选完文件后浏览，提交上传

<div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
  <img id="pimages" name="pimages" style="width: 400px;height: 200px;"/>
  <button type="button" class="layui-btn" id="test9">开始上传</button>
</div>

  upload.render({
    elem: '#test8'
    ,url: ' ' //改成自己的上传接口
    ,auto: false  //是否自动上传
    ,bindAction: '#test9'  //上传触发绑定
    ,choose: function(obj){//文件选中后的回调，预读本地文件，不支持ie8
		obj.preview(function(index, file, result){
		   $('#pimages').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
        });
     }
    ,done: function(res){
      layer.msg('上传成功');
      console.log(res)
    }
  });

4、拖拽图片上传

<div class="layui-upload-drag" id="test10">
  <i class="layui-icon"></i>
  <p>点击上传，或将文件拖拽到此处</p>
  <div class="layui-hide" id="uploadDemoView">
    <hr>
    <img src="" alt="上传成功后渲染" style="max-width: 196px">
  </div>
</div>

 //拖拽上传
  upload.render({
    elem: '#test10'
    ,url: ' ' //改成自己的上传接口
    ,done: function(res){
      layer.msg('上传成功');
      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
      console.log(res)
    }
  });

5、页面结构

<head>
     <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.6/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.6/dist/layui.js"></script>

</head>

<body>
    --------------body------------
</body>

<script>
    layui.use(['upload', 'element', 'layer'], function(){
      var $ = layui.jquery
      ,upload = layui.upload
      ,element = layui.element
      ,layer = layui.layer;

        -----------逻辑模块js-----------

</script>

Admin_ghost

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui框架下图片上传、预览，html+javaScript

1、单图片预览上传<div class="layui-upload"> <button type="button" class="layui-btn" id="test1">上传图片</button> <div class="layui-upload-list"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p>...
复制链接

扫一扫