国产精品成人VA在线观看,亚洲日韩在线中文字幕综合,亚洲AV电影天堂男人的天堂,久久人人爽人人爽人人av东京热


News新聞

業(yè)界新聞動(dòng)態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁(yè)      樂(lè)道系統(tǒng)FAQ      PHP實(shí)現(xiàn)上傳多圖即時(shí)顯示與即時(shí)刪除的方法

PHP實(shí)現(xiàn)上傳多圖即時(shí)顯示與即時(shí)刪除的方法

標(biāo)簽： 發(fā)布日期：2017-05-09 00:00:00 242
【CLI】利用Curl下載文件實(shí)時(shí)進(jìn)度條顯示的實(shí)現(xiàn)

本文實(shí)例講述了PHP實(shí)現(xiàn)上傳多圖即時(shí)顯示與即時(shí)刪除的方法。分享給大家供大家參考，具體如下：

就像這樣的，每選擇一個(gè)圖片就會(huì)即時(shí)顯示出來(lái)，附加到右邊，也可以隨意刪除一個(gè)元素。

其實(shí)是，當(dāng)type=file的input框框的onchange事件===》》》post數(shù)據(jù)提交到隱藏的ifram（form表單的target指定）===》》》接收到post數(shù)據(jù)的直接 echo    script標(biāo)簽來(lái)返回?cái)?shù)據(jù)到前端頁(yè)面并且賦值，然后存儲(chǔ)圖片路徑也是用隱藏域?qū)崿F(xiàn)：

HTML：

<!doctype html>
<html lang="cn">
<include file="Public/head"/>
<body>
<include file="Public/nav"/>
<iframe name="upload_url" style="display:none"></iframe>
   <div class="wlog">
     <div class="wlog_t cf">
       <b>寫(xiě)日志</b>
     </div>
     <div class="wlog_c">
       <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post">
         <div class="wlog_l">
           <textarea id="content" name="data[content]"></textarea>
           <input type="hidden" id="step" value="1" name="data[step]" />
         </div>
         <div class="wlog_r">
           <h2>選擇裝修階段</h2>
           <b class="cur" mine="1" style="line-height:20px;">準(zhǔn)備開(kāi)工</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="準(zhǔn)備開(kāi)工"> -->
         </div>
         <div class="wlog_f cf">
           <h2><b>上傳圖片</b>選擇裝修過(guò)程中的照片，每張低于5M，支持JPG/JPEG/PNG格式，最多9張</h2>
           <div 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>
             <div id="addimg"></div>
             <!-- <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> -->
           </div>
         </div>
         <div class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="發(fā)布日志"></div>
       </form>
     </div>
   </div>
<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('請(qǐng)?zhí)顚?xiě)日志');
      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>