首页 > 其他分享> > layui中多图片上传

layui中多图片上传

2019-04-17 11:52:25 作者：互联网

效果:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>多图片上传表单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <style type="text/css">
     .layui-upload-img{
     	width: 50px;
     	height: 50px;
     }

  </style>
</head>
<body>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>上传多张图片</legend>
</fieldset>
 
<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>

<script src="../layui/layui.js" charset="utf-8"></script>

<script>
layui.use('upload', function(){
  var $ = layui.jquery,
  upload = layui.upload;
  //多图片上传
  upload.render({
    elem: '#test2',
    url: 'upload.php',
    multiple: true,
    before: function(obj){  
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    },
    done: function(res){
      // alert(res);
    }
  });
});
  </script>

</body>
</html>

<?php
//接收控制器
 $file = $_FILES['file'];
 $tmpname = $file['tmp_name'];  //文件临时存储路径名
 $filename = $file['name'];  //文件名
 $fileurl = "./"; //移动到路径
 if(is_uploaded_file($tmpname)){  //临时文件存在
     $mvd = move_uploaded_file($tmpname,$fileurl.$filename); //移动到自定义的位置
     if(!$mvd){
        echo 0;
     }else
     {
        echo 1;
     }
 }

标签：function,layui,upload,res,中多,上传,图片
来源： https://blog.csdn.net/weixin_41887155/article/details/89352295