Heim > Artikel > Backend-Entwicklung > So zeigen Sie mehrere mit PHP hochgeladene Bilder sofort an und löschen sie

So zeigen Sie mehrere mit PHP hochgeladene Bilder sofort an und löschen sie

墨辰丷Original: 2018-05-22 15:59:341500Durchsuche

Dieser Artikel stellt hauptsächlich die Methode von PHP vor, um mehrere hochgeladene Bilder sofort anzuzeigen und sofort zu löschen. Er analysiert die Betriebsfähigkeiten von PHP zum Anzeigen, Hochladen und Löschen von Bilddateien in Form von Beispielen.

Das Beispiel in diesem Artikel beschreibt die Methode von PHP, um die sofortige Anzeige und sofortige Löschung mehrerer hochgeladener Bilder zu implementieren. Teilen Sie es als Referenz mit allen:

Jedes Mal, wenn Sie ein Bild auswählen, wird es sofort angezeigt und rechts angehängt . Sie können ein Element auch nach Belieben löschen.

In der Tat, wenn das Onchange-Ereignis des Eingabefelds vom Typ=Datei===》》》die Postdaten an das versteckte IFRAM (Zielspezifikation des Formularformulars)===》》》übermitteln Post-Daten werden empfangen. Geben Sie das Skript-Tag direkt wieder, um Daten an die Front-End-Seite zurückzugeben und einen Wert zuzuweisen, und speichern Sie dann den Bildpfad mithilfe ausgeblendeter Felder:

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>

Controller (gibt den Pfad des ausgewählten Bildes (bereits hochgeladen) auf dem Server zurück):

public function submitimg(){
    if(IS_POST){
        $data = I(&#39;post.data&#39;);//获取post数据
        $res = fab_upload($_FILES);//上传文件
        $uid=uniqid();
        $res=$res[&#39;thumb&#39;];
        if($res){
          echo "<script>parent.callblack_img(&#39;{$res}&#39;,&#39;{$uid}&#39;);</script>";
        }
     }
}

Die eigentliche Funktion, die schließlich die Formulardaten empfängt und in der Datenbank speichert:

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

In Verbindung stehende Artikel

Mehr sehen

So zeigen Sie mehrere mit PHP hochgeladene Bilder sofort an und löschen sie

Verwandte Empfehlungen:

In Verbindung stehende Artikel