layui 图片上传，多图上传。auto=false 的时候 图片会重复上传

在 layui 中，当使用多图上传并设置 `auto=false` 时，图片会在选择后立即上传到服务器。如果用户多次选择同一张图片并上传，那么该图片会被重复上传多次。

为了避免这种情况，您可以在上传前检查图片是否已经被上传过。可以通过记录已上传的图片名或者哈希值来实现。当用户再次选择同一张图片上传时，先判断该图片是否已经被上传过，如果已经上传过则不再重复上传，否则再进行上传操作。这样可以避免图片的重复上传。

相关问题

layui 图片上传的时候，设置多图，并且 auto 设置为false如何让选择的图片显示在页面上

在 layui中，图片上传设置多图并且auto设置为false后，可以通过监听上传事件，获取上传成功后的图片信息，然后将图片信息动态添加到页面上。

具体实现方式如下：

1. 在页面中设置一个用于显示图片的容器，例如：

<div id="images"></div>

2. 在图片上传组件中设置多图，并且auto设置为false，例如：

layui.use('upload', function(){
  var upload = layui.upload;
  
  upload.render({
    elem: '#test'
    ,url: '/upload/'
    ,multiple: true //设置多图
    ,auto: false //不自动上传
    ,bindAction: '#submit' //指定上传按钮
    ,done: function(res){
      console.log(res);
    }
  });
});

3. 监听上传事件，获取上传成功后的图片信息，并将图片信息动态添加到页面上，例如：

layui.use('upload', function(){
  var upload = layui.upload;
  
  upload.render({
    elem: '#test'
    ,url: '/upload/'
    ,multiple: true //设置多图
    ,auto: false //不自动上传
    ,bindAction: '#submit' //指定上传按钮
    ,choose: function(obj){
      //将选择的图片动态添加到页面上
      var imagesContainer = document.getElementById('images');
      var files = obj.pushFile();
      layui.each(files, function(index, file){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
          var img = document.createElement('img');
          img.src = this.result;
          imagesContainer.appendChild(img);
        }
      });
    }
    ,done: function(res){
      console.log(res);
    }
  });
});

这样，选择的图片就会动态添加到页面上了。

layui 多图片上传

以下是layui多图片上传的示例代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="testList">选择多文件</button>
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：
    <div class="layui-upload-list" id="demo2"></div>
  </blockquote>
</div>

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

  //多文件列表示例
  var demoListView = $('#demo2')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: '/upload/'
    ,accept: 'images'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){
      var files = obj.pushFile();
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        var tr = $(['<div class="layui-upload-item">'
          ,'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'
          ,'<div class="layui-upload-item-del">删除</div>'
        ,'</div>'].join(''));

        //删除
        tr.find('.layui-upload-item-del').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
        });

        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.layui-progress-bar').css('background-color', '#FF5722');
      tds.eq(3).find('.layui-progress-text').html('上传失败');
    }
  });
});
</script>

该示例使用了layui的upload模块，实现了多文件上传的功能。用户可以选择多个文件，然后点击“开始上传”按钮上传文件。上传成功后，文件会显示在预览区域中，并且可以删除。如果上传失败，会在上传进度条中显示错误信息。