コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > PHPを使用して複数の画像をアップロードして即時表示および即時削除する方法

PHPを使用して複数の画像をアップロードして即時表示および即時削除する方法

墨辰丷
リリース： 2023-03-27 13:46:01
オリジナル
1564 人が閲覧しました

この記事では、アップロードされた複数の画像の即時表示と即時削除を実現するための PHP の方法を主に紹介し、画像ファイルのプレビュー、アップロード、削除に関する PHP の関連操作スキルをサンプルの形式で分析します。この記事では、アップロードされた複数の画像の即時表示と即時削除を実現するためのPHPメソッドを開発した例について説明します。参考のためにみんなと共有してください。詳細は次のとおりです:

このように、写真を選択するたびに、すぐに表示されて右側に添付され、要素を自由に削除することもできます。

実際には、type=file===》》》投稿データの入力ボックスのonchangeイベントを隠しifram（フォームフォームのターゲット指定）===》》》ダイレクトエコースクリプトタグに送信すると、投稿データを受け取ります フロントエンド ページにデータを返し、値を割り当て、画像パスを保存するには、隠しフィールドを使用して実装することもできます。サーバー パス上の選択された画像 (アップロード済み) を返します): 

<!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>
ログイン後にコピー

最終的にフォーム データを受信して​​データベースに保存する実際の関数: 

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>";
        }
     }
}
ログイン後にコピー

関連する推奨事項:

javascript - Mobile wap station h5

さらにアップロード UC Browser の画像

機能で複数の画像を選択できません。どうすれば解決しますか?

モバイルwapステーションh5

複数の写真をアップロード

UCブラウザの写真機能で複数の写真を選択できません、どうすれば解決しますか？

jquery - php

複数の写真をアップロード写真の後に各写真を記述してmysqlに保存します

以上がPHPを使用して複数の画像をアップロードして即時表示および即時削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
php 消去 見せる
ソース：php.cn
前の記事：PHP で 1 つ以上のランダム文字列のグループを生成する方法 次の記事：PHP は、imagecopymerge() 関数を使用して半透明のウォーターマーク メソッドを作成します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
URL パラメータから取得した PHP 配列が期待どおりに動作しない カテゴリ ID を含む URL パラメータがあり、それを次のような配列として扱いたいと考えています: http://example.com?cat[]=3,9,13 PHP では、...
から 2024-04-06 22:09:02
0
1
1428
ApacheのどこにCustomLogディレクティブを配置すればよいですか 私はphp:7.2-apachedockerを使用しています。ヘルスチェック URL ログイン アクセス ログを無効にする必要があります。このリンクに基づいて、Customlog ...
から 2024-04-06 22:03:59
0
1
990
戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
から 2024-04-06 21:55:20
0
1
778
opentbs を使用して odt ファイルを生成するときに発生する問題: 同じキーの値が別の列ではなく同じ行に表示されます。 PHPでodtを作成するためにOpenTbsというライブラリを使っていますが、列と行が動的に生成されるので利用しています。行と列の作成方法は知っていますが、それらを整理する方法がわ...
から 2024-04-06 20:18:18
0
1
483
ループするために MySQL の結果を ID ごとにグループ化する mysqlにフライトデータを含むテーブルがあります。 codeigniter3Journey_idair_idFlightDurationout_or_inflightdurati...
から 2024-04-06 17:27:56
0
1
406
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート