thinkphp5多图上传即时显示

//html代码片段
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多图上传即时显示</title>
    <script src="xxxxxx/js/jquery1.42.min.js"></script>
</head>
<body>
    <iframe name="ifr" style="display: none"></iframe>
    <div class="sd-bobo">
        <div class="upload_pic">
            <form action="/index.php/index/index/moreUpload" target="ifr" method="post" enctype="multipart/form-data">
                <span><input type="button" onclick="do_do()" value="图片上传" style="background-color: deepskyblue;border-radius: 10px"></span>
                <span hidden><input id="weblogo_file"  onchange="do_do1()" type="file" name="pic"></span>
                <span hidden><input id="weblogo_submit" type="submit" value="上传"></span>
            </form>
        </div>
        <div id="tui_tu" style="margin-top: 10px"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    function tui_pic_img(id){
        $(id).remove();
    }
    function do_do(id){
        var num = $('.tui_pic_i');
        if(num.length>8){
            alert('只允许添加九张图');
            return false;
        }
        $("#weblogo_file").click();
    }
    function do_do1(id){
        $("#weblogo_submit").click();
    }
</script>

//页面渲染
	 public function morePic(){
        return $this->fetch();
     }


 //多图片上传方法
  public function moreUpload(){
        $file = request()->file('pic');
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/tu');
        $name = $info->getSaveName();
        //将反斜杠替换成正斜杠
        $name = str_replace('\\', '/', $name);
        $images = '/uploads/tu/'.$name;
        $img = "<img onclick='tui_pic_img(this)' src='".$images."' style='width: 65px;height: 70px;margin-right:10px'/>";
        echo '
    <script type="text/javascript" src="https://www.shizhanzhe.com/js/jquery1.42.min.js"></script>
    <script>
          $("#tui_tu",window.parent.document).html($("#tui_tu",window.parent.document).html()+"'.$img.'");
    </script>';
    }
thinkphp5多图上传即时显示

猜你喜欢
