How to upload multiple images for instant display and instant deletion using PHP-PHP Tutorial-php.cn

How to upload multiple images for instant display and instant deletion using PHP

墨辰丷

Release： 2023-03-27 13:46:01

Original

1493 people have browsed it

This article mainly introduces the method of PHP to realize instant display and instant deletion of uploaded multiple images. It analyzes PHP's related operation skills for previewing, uploading and deleting image files in the form of examples. Friends in need can refer to the following

The example of this article describes the method of PHP to realize the instant display and instant deletion of uploaded multiple images. Share it with everyone for your reference. The details are as follows:

Just like this, every time you select an image, it will be displayed immediately and attached to the right. You can also delete an element at will. .

In fact, when the onchange event of the input box of type=file ===》》》post data is submitted to the hidden ifram (target specification of the form form) ===》》》post data is received Directly echo the script tag to return data to the front-end page and assign a value, and then store the image path using hidden fields:

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>

Copy after login

Controller(returns the path of the selected image (already uploaded) in the server):

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>";
        }
     }
}

Copy after login

The real function that finally receives the form data and stores it in the database:

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

Copy after login

Related recommendations:

javascript - Mobile wap site h5Upload multiple picturesThe picture function cannot select multiple pictures in UC browser, how to solve it?

Mobile wap station h5Upload multiple picturesThe picture function cannot select multiple pictures in UC browser, how to solve it?

jquery - php Upload multiple picturesDescribe each picture after the picture and save it to mysql

The above is the detailed content of How to upload multiple images for instant display and instant deletion using PHP. For more information, please follow other related articles on the PHP Chinese website!