tp5简单的多图片上传并预览demo

今天没事去研究了一下多图片同时上传，看了很多案例，也下载了一些插件，感觉都很复杂，就自己想了一个思路，做了个简单的demo，代码贴出来，供大家参考一下。由于我也是小菜鸟，所以代码里有什么问题欢迎大家提出来。

这个多图上传的思路是：先添加一个<input type="file">的文件按钮，设置样式opacity=0；z-index=1；覆盖在一个普通按钮<input type="button">上（新手注意哈，这里z-index要设置pozition才有效，这里要将file按钮覆盖到普通按钮上，本就要设置pozition=absolute绝对定位）；在选择图片后，生成预览图，同时添加<input type="file">,设置z-index=2,覆盖到之前的file按钮上，以此类推。

引入文件：

    <link rel="stylesheet" type="text/css" href="/public/html/style/bootstrap.min.css">
    <script src="/public/html/js/jquery-3.1.0.min.js"></script>
    <script src="/public/html/js/bootstrap.min.js"></script>

HTML代码：

<form  method="post" enctype="multipart/form-data" action="{:url("index/fileupload/doUpload")}"  id="box">


    <!--file包裹-->
    <div class="addbtn_wrap">
        <input type="button" class="btn btn-primary addbtn" value="点击添加图片">
        <input type="file" name="image[]" id="file1" style="z-index: 1" onchange="getPhoto(this)">
    </div>


    <!--图片包裹-->
    <div class="img_wrap">

    </div>

    <input type="submit" value="开始上传" class=" btn btn-primary ">


</form>

CSS样式：

 <style>

        /*表单标签*/
        #box{
            margin:50px auto;
            width:600px;
            padding-bottom: 10px;
            min-height:400px;
            background:#FF9;
        }

        /*点击添加图片按钮div包裹*/
        .addbtn_wrap{
            position: relative;
        }

        /*添加图片按钮*/
        .addbtn{
            position: absolute;
        }
        input[type=file]{
            width: 100px;
            position: absolute;
            top: 5px;
            opacity: 0;
        }

        /*提交按钮*/
        input[type=submit]{
            margin: 0 auto;
            display: none;
        }

        /*所有图片div包裹*/
        .img_wrap{
            width:600px;
            margin-top: 40px;
            float: left;
            margin-bottom: 40px;
        }


        .pic_wrap{
            width: 180px;
            height: 160px;
            float: left;
            position: relative;
            margin: 5px;
        }


        .img{
            width: 180px;
            height: 160px;
           float: left;
        }

        .delete{
            width: 180px;
            height: 160px;
            position: absolute;
            display: none;
            border-radius: 6px;
        }

        .delete img{
            float: right;
        }

    </style>

jquery代码：

<script type="text/javascript">


    /*预览*/
    var count=1;
    function getPhoto(node) {

        var imgURL = "";
        try{
            var file = null;
            if(node.files && node.files[0] ){
                file = node.files[0];
            }else if(node.files && node.files.item(0)) {
                file = node.files.item(0);
            }

            try{
                imgURL =  file.getAsDataURL();
            }catch(e){
                imgRUL = window.URL.createObjectURL(file);
            }
        }catch(e){
            if (node.files && node.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    imgURL = e.target.result;
                };
                reader.readAsDataURL(node.files[0]);
            }
        }

        /*动态添加file和对应的图片预览*/
        createPic();
        createFile();

        count++;
        return imgURL;
    }

    /*创建图片预览元素*/
    function createPic() {
        var picText="<div class="pic_wrap" id=" showPic"+count+"" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">"+
                "<img  src=""+imgRUL+""" class="img img-rounded">"+
                "<div class="delete"><img src="/public/html/images/x_alt.png" onclick="deletePic(this)"></div>"+
                "</div>";

        /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/

        for(var i=0;i< $("input[type=file]").length-1;i++){
            var val= $("input[type=file]").eq(i).val();


            if($("input[type=file]").last().val()==val){

                /*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
                count=count-1;
                return;
            }
        }

        $(".img_wrap").append(picText);

    }



    /*创建新的file元素*/
    function createFile() {

        var flieText="<input type="file" name="image[]" id="file"+(count+1)+"" style="z-index: "+(count+1)+"" onchange="getPhoto(this)">";

        /*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/

        for(var i=0;i< $("input[type=file]").length-1;i++){
            var val= $("input[type=file]").eq(i).val();

            if($("input[type=file]").last().val()==val){
                var file = $("input[type=file]").last();
                file.after(file.clone().val(""));
                file.remove();
                alert("图片已存在！");
                return;
            }
        }


        $(".addbtn_wrap").append(flieText);


        /*图片数量大于1，显示提交按钮，添加一次判断一次*/
        if($(".pic_wrap").length<=0){

            $("input[type=submit]").css("display","none");
        }else {
            $("input[type=submit]").css("display","block");
        }
    }



    /*移入移出，删除遮罩层显示隐藏*/
    function overDelete(obj) {
        $(obj).children("div").show();
    }

    function leaveDelete(obj) {
        $(obj).children("div").hide();
    }



    /*删除图片和对应的file*/
    function deletePic(obj) {

        /*提取图片的id的数字部分*/
        var picId=$(obj).parent().parent().attr("id");

        var picVal= picId.replace(/[^0-9]/ig,"");

        var fileArr=$("input[type=file]");

        /*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/

        fileArr.each(function () {

            /*提取file的id的数字部分*/
            var fileId=$(this).attr("id");
            var fileVal = fileId.replace(/[^0-9]/ig,"");
            if(fileVal==picVal){
                $(this).remove();
                $(obj).parent().parent().remove();
            }
        });

        /*图片数量大于1，显示提交按钮,删除一次判断一次*/

        if($(".pic_wrap").length<=0){

            $("input[type=submit]").css("display","none");

        }else {
            $("input[type=submit]").css("display","block");
        }
    }


</script>

tp5控制器代码：

    public function doUpload(){

        $files = request()->file("image");

        $info="";
        foreach($files as $picFile){

            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $picFile->move(ROOT_PATH."uploads".DS."images");


            /*获取存储路径，以便插入数据库*/
           /* $path= "/uploads/images/".$info->getSaveName();*/

        }

 

	if($info!==""){
            return $this->success("上传成功！");
            // 成功上传后 获取上传信息
            // 输出 jpg
            /* echo $info->getExtension();*/
            // 输出 42a79759f284b767dfcb2a0197904287.jpg
            /*echo $info->getFilename();*/
        }else{
            // 上传失败获取错误信息
            /* echo $file->getError();*/


            return $this->error("上传失败！");
        }