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

Home

Backend Development

PHP Tutorial

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

墨辰丷

May 22, 2018 pm 03:59 PM

phpdeleteshow

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 id="选择装修阶段">选择装修阶段</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 id="b-上传图片-b-选择装修过程中的照片-每张低于-M-支持JPG-JPEG-PNG格式-最多-张"><b>上传图片</b>选择装修过程中的照片，每张低于5M，支持JPG/JPEG/PNG格式，最多9张</h2>
           <p class="wlog_p cf">
             <a href="javascript:;" rel="external nofollow" ><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-29_231703.png"  class="lazy"   alt=""><input onchange="submitimg()" type="file" name="thumb"/></a>
             <p id="addimg"></p>
             <!-- <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   alt=""><i>x</i></b>
             <b><img src="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/images/2016-10-18_094906.png"  class="lazy"   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="/static/imghwm/default1.png"  data-src="__PUBLIC__/home/js/jquery-1.10.1.min.js"  class="lazy"  src=&#39;+dir+path+&#39; alt="How to upload multiple images for instant display and instant deletion using PHP" ><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" ></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(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>";
        }
     }
}

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();
     }
}

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How can you check if a PHP session has already started?Apr 30, 2025 am 12:20 AM

In PHP, you can use session_status() or session_id() to check whether the session has started. 1) Use the session_status() function. If PHP_SESSION_ACTIVE is returned, the session has been started. 2) Use the session_id() function, if a non-empty string is returned, the session has been started. Both methods can effectively check the session state, and choosing which method to use depends on the PHP version and personal preferences.

Describe a scenario where using sessions is essential in a web application.Apr 30, 2025 am 12:16 AM

Sessionsarevitalinwebapplications,especiallyfore-commerceplatforms.Theymaintainuserdataacrossrequests,crucialforshoppingcarts,authentication,andpersonalization.InFlask,sessionscanbeimplementedusingsimplecodetomanageuserloginsanddatapersistence.

How can you manage concurrent session access in PHP?Apr 30, 2025 am 12:11 AM

Managing concurrent session access in PHP can be done by the following methods: 1. Use the database to store session data, 2. Use Redis or Memcached, 3. Implement a session locking strategy. These methods help ensure data consistency and improve concurrency performance.

What are the limitations of using PHP sessions?Apr 30, 2025 am 12:04 AM

PHPsessionshaveseverallimitations:1)Storageconstraintscanleadtoperformanceissues;2)Securityvulnerabilitieslikesessionfixationattacksexist;3)Scalabilityischallengingduetoserver-specificstorage;4)Sessionexpirationmanagementcanbeproblematic;5)Datapersis

Explain how load balancing affects session management and how to address it.Apr 29, 2025 am 12:42 AM

Load balancing affects session management, but can be resolved with session replication, session stickiness, and centralized session storage. 1. Session Replication Copy session data between servers. 2. Session stickiness directs user requests to the same server. 3. Centralized session storage uses independent servers such as Redis to store session data to ensure data sharing.

Explain the concept of session locking.Apr 29, 2025 am 12:39 AM

Sessionlockingisatechniqueusedtoensureauser'ssessionremainsexclusivetooneuseratatime.Itiscrucialforpreventingdatacorruptionandsecuritybreachesinmulti-userapplications.Sessionlockingisimplementedusingserver-sidelockingmechanisms,suchasReentrantLockinJ

Are there any alternatives to PHP sessions?Apr 29, 2025 am 12:36 AM

Alternatives to PHP sessions include Cookies, Token-based Authentication, Database-based Sessions, and Redis/Memcached. 1.Cookies manage sessions by storing data on the client, which is simple but low in security. 2.Token-based Authentication uses tokens to verify users, which is highly secure but requires additional logic. 3.Database-basedSessions stores data in the database, which has good scalability but may affect performance. 4. Redis/Memcached uses distributed cache to improve performance and scalability, but requires additional matching

Define the term 'session hijacking' in the context of PHP.Apr 29, 2025 am 12:33 AM

Sessionhijacking refers to an attacker impersonating a user by obtaining the user's sessionID. Prevention methods include: 1) encrypting communication using HTTPS; 2) verifying the source of the sessionID; 3) using a secure sessionID generation algorithm; 4) regularly updating the sessionID.

See all articles