PHP上傳多圖即時顯示與即時刪除的方法

最後更新：2018-05-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章主要介紹了PHP實現上傳多圖即時顯示與即時刪除的方法,結合執行個體形式分析了php針對圖片檔案的預覽、上傳及刪除相關操作技巧,需要的朋友可以參考下

本文執行個體講述了PHP實現上傳多圖即時顯示與即時刪除的方法。分享給大家供大家參考，具體如下：

就像這樣的，每選擇一個圖片就會即時顯示出來，附加到右邊，也可以隨意刪除一個元素。

其實是，當type=file的input框框的onchange事件===》》》post資料提交到隱藏的ifram（form表單的target指定）===》》》接收到post資料的直接 echo script標籤來返回資料到前端頁面並且賦值，然後儲存圖片路徑也是用隱藏欄位實現：

HTML：

<!doctype html><html lang="cn"><include file="Public/head"/><body><include file="Public/nav"/><iframe name="upload_url" style="display:none"></iframe>   <p class="wlog">     <p class="wlog_t cf">       <b>寫日誌</b>     </p>     <p class="wlog_c">       <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post">         <p class="wlog_l">           <textarea id="content" name="data[content]"></textarea>           <input type="hidden" id="step" value="1" name="data[step]" />         </p>         <p class="wlog_r">           <h2>選擇裝修階段</h2>           <b class="cur" mine="1" style="line-height:20px;">準備開工</b>           <b mine="2" >水電</b>           <b mine="3">泥木</b>           <b mine="4">油漆</b>           <b mine="5">竣工</b>           <b mine="6">軟裝</b>           <!-- <input type="hidden" value="準備開工"> -->         </p>         <p class="wlog_f cf">           <h2><b>上傳圖片</b>選擇裝修過程中的照片，每張低於5M，支援JPG/JPEG/PNG格式，最多9張</h2>           <p class="wlog_p cf">             <a href="javascript:;" rel="external nofollow" ><img src="__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a>             <p id="addimg"></p>             <!-- <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b>             <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> -->           </p>         </p>         <p class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="發布日誌"></p>       </form>     </p>   </p><include file="Public/footer"/>  <script type="text/javascript">  function submitimg(){    $("#myform").attr('target','upload_url');    $("#myform").attr('action',"{:U('Journal/submitimg')}");    $("#myform").submit();  }  function goods_form_submit()  {     if(!$('#content').val()){      alert('請填寫日誌');      return false;    }    $('#myform').attr('target','');    $('#myform').attr('action','');    $('#myform').submit();  }  function callblack_img(path,uid)  {  var html="";    var dir = "{:C(FILE_PATH)}";    var html ='<b><img src='+dir+path+'><i>x</i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></b>';    $('#addimg').append(html);  }  </script>  <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.10.1.min.js"></script>  <script type="text/javascript" src="__PUBLIC__/home/js/basis.js"></script>  <script>  $(function(){    $('.wlog_r b').click(function(event) {      $(this).addClass('cur').siblings('b').removeClass('cur');      $('.wlog_r input[type=hidden]').val($(this).text());    });    $("#addimg").delegate("i","click",function () {      $(this).parent("b").remove();    })  })    $("b").click(function(){      var value =$(this).attr('mine');      $("#step").val(value);    })  </script></body></html>

控制器(返回被選中的圖片（已經上傳）在伺服器之中的路徑)：

public function submitimg(){    if(IS_POST){        $data = I('post.data');//擷取post資料        $res = fab_upload($_FILES);//上傳檔案        $uid=uniqid();        $res=$res['thumb'];        if($res){          echo "<script>parent.callblack_img('{$res}','{$uid}');</script>";        }     }}

真正的最後接收表單資料並且存入資料庫的函數：

public function add_journal(){     if(IS_POST){         var_dump($_POST);die;       }else{        $this->display();     }}

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More