php アップローダー　削除機能付き

  1. <?php
  2. $tempfile = $_FILES['file']['tmp_name'];
  3. $filename = './img/'.$_FILES['file']['name'];
  5. if (is_uploaded_file($tempfile)) {
  6.     if (move_uploaded_file($tempfile, $filename)) {
  7.         echo $filename . "をアップロードしました。";
  8.     }
  9. }
  10. ?>
  12. <html lang="ja">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <title>kimiite.アップロード</title>
  16.       <style>
  17.        <!--
  18.       BODY{
  19.        background-color :#fff;
  20.        margin: auto;
  21.        max-width: 800px;
  22.        /* 最大幅 */
  23.        min-width: 340px;
  24.        /* 最小幅 */
  25.       }
  26.     .br1 {
  27.        padding: 5px;
  28.        }
  29.        -->
  30.       </style>
  31. </head>
  32. <body>
  33. <h3>画像アップロード</h3>
  34. <form action="./image.php" method="post" enctype="multipart/form-data">
  35.     <div id="drop-zone" style="border: 1px solid; padding: 30px;">
  36.         <p>ファイルをドラッグ＆ドロップもしくは</p>
  37.         <input type="file" name="file" id="file-input">
  38.     </div>
  39.     <h3>アップロードした画像</h3>
  40.     <div id="preview"></div>
  41.     <input type="submit" style="margin-top: 50px">
  42. </form>
  43. <script type="text/javascript">
  45.     var dropZone = document.getElementById('drop-zone');
  46.     var preview = document.getElementById('preview');
  47.     var fileInput = document.getElementById('file-input');
  49.     dropZone.addEventListener('dragover', function(e) {
  50.         e.stopPropagation();
  51.         e.preventDefault();
  52.         this.style.background = '#e1e7f0';
  53.     }, false);
  55.     dropZone.addEventListener('dragleave', function(e) {
  56.         e.stopPropagation();
  57.         e.preventDefault();
  58.         this.style.background = '#ffffff';
  59.     }, false);
  61.     fileInput.addEventListener('change', function () {
  62.         previewFile(this.files[0]);
  63.     });
  65.     dropZone.addEventListener('drop', function(e) {
  66.         e.stopPropagation();
  67.         e.preventDefault();
  68.         this.style.background = '#ffffff';
  69.         var files = e.dataTransfer.files;
  70.         if (files.length > 1) return alert('アップロードできるファイルは1つだけです。');
  71.         fileInput.files = files;
  72.         previewFile(files[0]);
  73.     }, false);
  75.     function previewFile(file) {
  76.         /* FileReaderで読み込み、プレビュー画像を表示。 */
  77.         var fr = new FileReader();
  78.         fr.readAsDataURL(file);
  79.         fr.onload = function() {
  80.             var img = document.createElement('img');
  81.             img.setAttribute('src', fr.result);
  82.             preview.innerHTML = '';
  83.             preview.appendChild(img);
  84.         };
  85.     }
  86. </script>
  88. <?php
  89. //ディレクトリ名
  90. $dir_path = "./img";
  91. if (is_dir($dir_path))
  92. {
  93. if(is_readable($dir_path))
  94. { // ? ファイルが読み込み可能かどうか
  95. $ch_dir = dir($dir_path); //ディレクトリクラス
  96. }
  97.  }
  98. ?>
  100. <?php
  102. // img以下の画像ファイルを表示
  103.        echo '<p>アップロードされたファイル一覧</p>';
  104.        foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file)
  105. ?>
  107. <?php
  109. // img以下の画像ファイルを削除
  110.  if (array_key_exists('delete_file', $_POST)) {
  111.   $filename = $_POST['delete_file'];
  112.   if (file_exists($filename)) {
  113.     unlink($filename);
  114.     echo 'File '.$filename.' has been deleted';
  115.   } else {
  116.     echo 'Could not delete '.$filename.', file does not exist';
  117.   }
  118. }
  119. ?>
  121. <div>
  122.             <?php
  123.             $files = glob("img/*");
  124.             foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file){
  125.                 echo htmlspecialchars($file) . '<br />';
  126.                 echo "<div class='divimages'>";
  127.                 echo "<a href = \"".$file. "\" target = \"_blank\" >";
  128.                 echo '<img src="'.$file.'" width="200\'"/></a>';
  129.                 echo '<form method="post">';
  130.   echo '<input type="hidden" value="'.$file.'" name="delete_file" />';
  131.   echo "<div class='br1'></div>";
  132.   echo '<input type="submit" value="Delete image" />';
  133.   echo '</form>';
  134.                 echo "</div>";
  135.             }
  136.             ?>
  138. </div>
  140. </body>
  141. </html>
最終更新日:2020/12/06