thinkphp5多图上传即时显示

最新推荐文章于 2023-02-15 17:13:25 发布

高山流水遇知音-log

最新推荐文章于 2023-02-15 17:13:25 发布

阅读量2.5k

点赞数

分类专栏： thinkphp5

本文链接：https://blog.csdn.net/luoangen/article/details/82863641

版权

thinkphp5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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">
        <img class="tui_pic_i" src=""/>
        </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>';
}

高山流水遇知音-log

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
thinkphp5多图上传即时显示

//html代码片段&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;多图上传即时显示&amp
复制链接

扫一扫

专栏目录