先看效果图

image.png
image.png

[图片上传中...(image.png-746cfe-1564716841126-0)]

image.png

不逼逼 直接上核心代码

css 和 js 资源在底部

php

//  上传图片。保存图片   
        //  上传图片。保存图片   
     function ajax_upload($path='/case/',$format='empty',$maxSize='524288000')  
        {
                
            ini_set('max_execution_time', '0');  
            // 去除两边的/  
            $path=trim($path,'/');  

            // 添加Upload根目录  
            $path=strtolower(substr($path, 0,6))==='upload' ? ucfirst($path) : $path;  

            // 上传文件类型控制  
            $ext_arr= array(  
            'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),  
            'photo' => array('jpg', 'jpeg', 'png'),  
            'flash' => array('swf', 'flv'),  
            'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),  
            'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2','pdf')  
            );  

            if(!empty($_FILES)){  
                // 上传文件配置  
                $config=array(  
                    'maxSize'   =>  $maxSize,               // 上传文件最大为500M  
                    'rootPath'  =>  './',                   // 文件上传保存的根路径  
                    'savePath'  =>  './data/upload/'.$path.'/',         // 文件上传的保存路径（相对于根路径）   // data/upload/case/  文件夹
                    'saveName'  =>  array('uniqid',''),     // 上传文件的保存规则，支持数组和字符串方式定义  
                    'autoSub'   =>  true,                   // 自动使用子目录保存上传文件 默认为true  
                    'exts'      =>    isset($ext_arr[$format])?$ext_arr[$format]:'',  
                );  
                
                // 实例化上传  
                $upload=new \Think\Upload($config);  

                // 调用上传方法  
                $info=$upload->upload();  

                $data=array();  
                if(!$info){  
                    // 返回错误信息  
                    $error=$upload->getError();  
                    $data['error_info']=$error;  
                    echo json_encode($data);  
                }else{  

                    // 返回成功信息  
                    foreach($info as $file){  
                        
                        $data['path']=trim($file['savepath'].$file['savename'],'.'); 
                        $data['filename'] = date("Y-m-d").'/'.trim($file['savename']);
                        
                        echo json_encode($data); 
                    }
                }
            }
            die();
        } 
    

html

 <tr>
              <th width="80">多图上传</th>
              <td>
                  <div style="width: 700px; height: auto; border: 1px solid #e1e1e1; font-size: 12px; padding: 10px;">
                      <div id="filePicker">选择图片</div>

                  </div>
                  <div id="thumbnails" class="ncap-thumb-list">

                  </div>
              </td>
          </tr>

css

<!--上传图片 css-->
<style type="text/css">
    .col-auto { overflow: auto; _zoom: 1;_float: left;}
    .col-right { float: right; width: 210px; overflow: hidden; margin-left: 6px; }
    .table th, .table td {vertical-align: middle;}
    .picList li{margin-bottom: 5px;}

    .thumb-list-pics{
        display:block;
        width:160px;
        height:240px;
        float:left;
        position:relative;
        margin: 5px;
        padding: 5px;
    }
    .thumb-list-pics input{

        width:140px;

    }


    .thumb-list-pics .del{

        position:absolute;
        top:3px;
        right:3px;
        cursor:pointer;
        color:#333;

    }





</style>
<link rel="stylesheet" type="text/css" href="/Public/css/webuploader.css" />

js

<script type="text/javascript" src="/Public/js/webuploader.js"></script>
<script type="text/javascript">

    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/Public/js/Uploader.swf',
        // 文件接收服务端。
        server: '{:u("AdminCasedo/ajax_upload")}',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',

        }
    });

    uploader.on( 'uploadSuccess', function( file,response) {
        var pics = "<div class='thumb-list-pics'><img src='"+response.path+"' style=' width:150px; height:180px; ' /><input type='hidden' value='"+response.filename+"' name='pic[]'><a  class='del' title='删除'>X</a></div>";
        $("#thumbnails").append(pics);

        delactive();

    });

    uploader.on( 'error', function(  code ) {
        if(code == 'Q_EXCEED_NUM_LIMIT'){
            alert('文件超过最大个数！');
        }else if(code == 'Q_EXCEED_SIZE_LIMIT '){
            alert('文件大小不能超过50M!');
        }else if(code == 'F_DUPLICATE'){
            alert('文件重复！');
        }else if(code == 'F_EXCEED_SIZE'){
            alert('文件大小不能超过50M!');
        }else{
            alert('上传文件类型:pdf。上传文件类型错误!');
        }
    });


    function delactive(){

        $('#thumbnails .del').off("click").on("click",function(){
            if(!window.confirm('您确定要删除吗?')){
                return;
            }

            var li = $(this).parent(".thumb-list-pics");

            li.remove();

        });
    }

    delactive();

</script>

css 和 js 资源地址

链接：https://pan.baidu.com/s/1MvyZ-Hhqy2N3wQWASKW9ug
提取码：0847
注：个人测试有效
微信 ：yx159337
欢迎一块来讨论