无刷新多图片上传

form:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多文件上传</title>
	<style>

            .main{
                width:500px;
                height:500px;
                border:1px solid black;
                margin:0 auto;
                margin-top: 28px;
                /*text-align: center;*/
            }

            #public{
                width: 98%;
                height: 200px;
                border: 1px solid green;
                margin: 0 auto;
                margin-top: 48px;
            }

             #public .pic{

                width: 160px;
                height: 160px;
                border: 1px solid #eee;
                float: left;
                margin: 0 auto;
                margin-top:20px; 
            }
            img{
                 width:auto;
                 height:auto;
                 max-width:100%;
                 max-height:100%;
                }
             
        </style>
</head>
<body>
<div class="main">
        <div id="public">    
        </div> 
        <div id="common">
            <input type="file" name="file" id="uploadFile" style="display:none">
        </div>

        <div id='bntUp' style="width:100px;margin-top:28px;height:60px;line-hight:60px;border:1px solid blue;margin:0 auto;margin-top:60px;text-align:center;">
            上传图片
        </div>   
	<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
</div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
     $(function(){
        //删除图片
        
          $("body").on("dblclick",".pic",function(){
               $(this).remove();
            })


        
        //单文件上传
        // $("#uploadFile").change(function(){
        //     var pic =$(this).get(0).files[0];
        //     var jsonPost = new FormData();
        //         jsonPost.append('file',pic); //图片
        //         jsonPost.append('_token',$('#token').val());//跨站攻击
        //     $.ajax({
        //             url: "{:U('upload')}",
        //             type: 'POST',
        //             dataType: 'json',
        //             processData: false,  
        //             contentType: false, 
        //              data: jsonPost,//{'file': pic}
        //         })
        //        .done(function(ret) {
        //             console.log("success");
        //        })
        // });
        //出发多文件上传
        $("body").on("change","#uploadFile",function(){
            //$("#uploadFile").change(function(){
                var pic =$(this).get(0).files[0];                
                var jsonPost = new FormData();
                jsonPost.append('file',pic);
                jsonPost.append('_token',$('#token').val());
                $.ajax({
                    url: "{:U('upload')}",
                    type: 'POST',
                    dataType: 'json',
                    processData: false,  
                    contentType: false, 
                    data: jsonPost,//{'file': pic},

                })
                .done(function(ret) {
                    if(ret.status=='success'){
                        alert('上传完成!');
                        var data ="<div class='pic'><img src='"+ret.img+"'/></div>";
                        $("#public").prepend(data);
                        $('#uploadFile').remove();
                        var bnt = "<input type=\"file\" name=\"file\" id=\"uploadFile\" style=\"display:none\">";
                        // $("#common").html(bnt);
                    }else{
                        alert('请重试!');
                    }
                    console.log("success");
                });             
            });

        $("#bntUp").click(function(event) { 
        //点击这出发上传功能             
               $("#uploadFile").click();               
            });
     });
</script>

</body>
</html>

后端

<?php

    public function upload()
    {
        if(IS_POST)
        {
            $file = $_FILES['file'];//接收文件
            $tmpname = $file['tmp_name'];  //文件临时存储路径名
            $filename = $file['name'];  //文件名
            $fileurl = "./Public/uploads/"; //移动到路径
            if(is_uploaded_file($tmpname)){  //临时文件存在
                $mvd = move_uploaded_file($tmpname,$fileurl.$filename); //移动到自定义的位置
                if(!$mvd){
                    $result = ["status"=>"error","img"=>"上传失败"];
                    echo json_encode($result);
                }else
                {
                    $result = ["status"=>"success","img"=>$fileurl.$filename];
                    echo json_encode($result);
                }
            }
        }else
        {
            $this->display();
        }
    }
}
?>

无刷新多图片上传

猜你喜欢