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

墨辰丷
發布: 2023-03-27 13:46:01
原創
1494 人瀏覽過

這篇文章主要介紹了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(&#39;target&#39;,&#39;upload_url&#39;);
    $("#myform").attr(&#39;action&#39;,"{:U(&#39;Journal/submitimg&#39;)}");
    $("#myform").submit();
  }
  function goods_form_submit()
  {
     if(!$(&#39;#content&#39;).val()){
      alert(&#39;请填写日志&#39;);
      return false;
    }
    $(&#39;#myform&#39;).attr(&#39;target&#39;,&#39;&#39;);
    $(&#39;#myform&#39;).attr(&#39;action&#39;,&#39;&#39;);
    $(&#39;#myform&#39;).submit();
  }
  function callblack_img(path,uid)
  {  var html="";
    var dir = "{:C(FILE_PATH)}";
    var html =&#39;<b><img src=&#39;+dir+path+&#39;><i>x</i><input type="hidden" value="&#39;+path+&#39;" name="thumb[&#39;+uid+&#39;]"></b>&#39;;
    $(&#39;#addimg&#39;).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(){
    $(&#39;.wlog_r b&#39;).click(function(event) {
      $(this).addClass(&#39;cur&#39;).siblings(&#39;b&#39;).removeClass(&#39;cur&#39;);
      $(&#39;.wlog_r input[type=hidden]&#39;).val($(this).text());
    });
    $("#addimg").delegate("i","click",function () {
      $(this).parent("b").remove();
    })
  })
    $("b").click(function(){
      var value =$(this).attr(&#39;mine&#39;);
      $("#step").val(value);
    })
  </script>
</body>
</html>
登入後複製

控制器

(傳回被選取的圖片(已上傳)在伺服器之中的路徑):


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


##相關推薦:

javascript - 手機wap站h5上傳多圖片功能在UC瀏覽器中無法多選圖片,怎麼解決?

手機wap站h5上傳多圖片功能在UC瀏覽器中無法多選圖片,怎麼解決?

############jquery - php ###上傳多圖###片後對每張圖片進行描述後儲存到mysql########### #################

以上是PHP上傳多圖即時顯示與即時刪除的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!