Tekil Mesaj gösterimi - Php Çoklu dosya yüklemeyi nasıl yapabilirim

Konu Php Çoklu dosya yüklemeyi nasıl yapabilirim

29-12-2022, 04:43:05

#18

Şimdi sıradan gideceğiz.
Size söyleyeceğim adımları sırasıyla uygulayın.
Güncelleyeceğim bu iletiyi.
Sona geldiğimde en başa bitti ifadesi ekleyeceğim.

Zaten dosya isimleriniz, tablo adı ve sütunlarınız yeterince yorucu.
Öncelikle ürün ile alakalı olan satırı bir template metin olarak düşünelim.

Alıntı

Şimdi aşağıdaki aşamalarda dosyalar upload.php'nin bulunduğu dizine yüklenmesi ve ürün ile alakalı seçeneklerin satır satır ekrana gelmesi gerekiyor?
Bunu bir test edin ve yanıt yazın.
Daha devamı gelecek..

Alıntı

indexsayfaencoksatilanurun.php dosyasına dahil edecekleriniz

<!--  Head bölgesi -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css">
<style type="text/css">
  #files{padding:15px}
  .fotoKutu{border:1px dashed #000;padding:15px;display:flex;flex-direction:column;justify-content:center;text-align:center}
  .fotoKutu h3{margin:0}
  .fotoKutu span{opacity:.5}
  .col-img .progress-bar{position:absolute;left:0;bottom:0;z-index:1;height:3px;background-color:green;width:0}
  .col-img{width:100px;height:100px;position:relative}
  .col-img img{width:100px;height:100px;border-radius:3px;object-fit:cover}
</style>

<!-- En alta -->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="upload.js"></script>

Alıntı

uruntpl.php - ve içeriği şu şekilde olsun

<script id="uruntpl" type="text/template">
    <div class="row" id="{{id}}">
        <div class="col col-img"><img src="{{src}}"><div class="progress-bar"></div></div>
        <div class="col mx-auto p-1 text-white mt-3 text-center">
            <input class="col w-100 text-center" type="text" name="indexsayfa_encoksatilan_urunadi[]" maxlength="50" placeholder="Ürün Adı Giriniz" required />
        </div>
        <div class="col mx-auto mt-3 pt-1 pe-1 ps-1">
            <textarea id="kodekle" class="w-100 text-center" name="indexsayfa_encoksatilan_urunozellikleri[]" placeholder="Ürün Özellik Giriniz" required></textarea>
        </div>
        <div class="col mx-auto mt-3 pt-1 pb-1 pe-1 ps-1">
            <select class="w-100 mx-auto text-center indexsayfa_urunekle_select" name="indexsayfa_encoksatilan_urunkategori[]" required>
                <option value="">Kategori Seçiniz</option>
                <?php
                    foreach ($category as $key => $value) {
                        echo '<option value="' . $key . '">' . $value . '</option>';
                    }
                ?>
            </select>
        </div>
        <div class="col mx-auto p-1 text-white mt-3 text-center">
            <input class="col w-100 text-center indexsayfa_urunekle_eskifiyat" type="text" name="indexsayfa_encoksatilan_eskifiyat[]" maxlength="50" placeholder="Eski Fiyat Giriniz" required />
        </div>
        <div class="col mx-auto p-1 text-white mt-3 text-center">
            <input class="col w-100 text-center indexsayfa_urunekle_yenifiyat" type="text" name="indexsayfa_encoksatilan_yenifiyat[]" maxlength="50" placeholder="Yeni Fiyat Giriniz" required />
        </div>
        <div class="col mx-auto p-1 text-white mt-3 text-center">
            <input class="col w-100 text-center indexsayfa_urunekle_indirimlifiyat" type="text" name="indexsayfa_encoksatilan_indirimlifiyat[]" maxlength="50" placeholder="İndirimli Fiyat Giriniz" required />
        </div>
    </div>
</script>

Alıntı

Daha sonra indexsayfaencoksatilanurun.php dosyanızın orta bölümünü şu şekilde güncelleyin

<?php
  $category = array(
      'Sporcu' => 'Sporcu Ürünleri',
      'Takviye' => 'Takviye Edici Gıdalar',
      'Aşağı Kilo' => 'Aşağı Kilo Kontrolü',
      'Yukarı Kilo' => 'Yukarı Kilo Kontrolü',
      'İçecekler' => 'İçecekler',
      'Skin Serisi' => 'Skin Serisi',
      'Aloe Bakım' => 'Aloe Bakım Serisi',
      'Atıştırmalıklar' => 'Atıştırmalıklar'
  );

  include 'uruntpl.php';
?>

<div class="container-fluid">
  <div class="row sayfayukseklik">
    <div class="col col-2 bg-warning">
      <?php include "yanmenu.php"; ?>
    </div>
    <div class="col col-10 bg-info">
      <form action="indexsayfaencoksatilanurunislem.php" method="POST" enctype="multipart/form-data">
        <div class="col w-25 mx-auto bg-success p-1 text-white mt-3 px-3 text-center">
          <div class="col">
            Resim Seç
          </div>
        </div>
        <div class="row">
          <input type="file" id="files-upload" multiple="" style="display:none;">
          <div id="files">
            <div class="fotoKutu">
              <h3>Fotoğrafları bırak yada yüklemek için tıkla</h3>
              <span>İzin verilen maksimun boyut 3MB</span>
            </div>
          </div>
        </div>
        <div id="rows"></div>
        <input type="submit" class="btn d-grid btn-success mx-auto mt-3" value="Ürünü Kaydet">
      </form>
    </div>
  </div>
</div>

Alıntı

upload.php - bir dosya oluşturalım içeriği sadece şu şekilde olacak, JSON ile gelen bir dosyayı upload edecek
Güvenlik, izinler vs diğer opsiyonları daha sonra ekleyeceksiniz

<?php
header('Content-type: application/json');

class FileUpload {
  // Maksimum dosya boyutunu belirtilen birimlerde dönüştürür
  public function getMaxSize($size) {
    $units = ['B', 'KB', 'MB', 'GB', 'TB'];
 
    for ($i = 0; $size > 1024; $i++) {
      $size /= 1024;
    }
 
    return round($size, 2) . ' ' . $units[$i];
  }
 
  // Dosya yükleme işlemini gerçekleştir
  public function upload($inputName, $uploadPath, $allowedTypes, $maxSize) {
    // Formdan gelen dosya bilgilerini al
    $files = $_FILES[$inputName];
    
    // Dosya bilgilerini al
    $name = $files['name'];
    $type = $files['type'];
    $tmpName = $files['tmp_name'];
    $error = $files['error'];
    $size = $files['size'];

    // Dosya yükleme işlemini gerçekleştir
    if (!in_array($type, $allowedTypes)) {
      // İzin verilmeyen dosya türü, hata mesajı ver
      return 'İzin verilmeyen dosya türü.';
    } elseif ($size > $maxSize) {
      // Dosya boyutu çok büyük, hata mesajı ver
      return 'Dosya ' . $this->getMaxSize($maxSize) . ' den büyük olamaz.';
    } elseif (!move_uploaded_file($tmpName, $uploadPath . $name)) {
      // Dosya yükleme işlemi başarısız, hata mesajı ver
      return 'Dosya yükleme işlemi başarısız.';
    }

    // Dosya yükleme işlemi başarılı
    return array('file' => $name);
  }
}
 
// FileUpload sınıfının bir nesnesini oluştur
$uploader = new FileUpload();
 
// İzin verilen dosya türlerini belirt
$allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
 
// Dosya yükleme işlemini gerçekleştir
exit(json_encode($uploader->upload('file', '/', $allowedTypes, 1024 * 1024 * 3)));

Alıntı

upload.js - adında bir javascript dosyası oluşturuyoruz

let wild = function(length) {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < length; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

$(function(){
  const preventDefaults = function(e) {
    e.preventDefault();
    e.stopPropagation();
  };

  const highlight = function(e) {
    files.classList.add("highlight");
  };

  const unhighlight = function(e) {
    files.classList.remove("highlight");
  };

  const handleDrop = function(e) {
    const dt = e.dataTransfer;
    const files = dt.files;

    handleFiles(files);
  };

  const handleFiles = function(files) {
    files = [...files];
    files.forEach(previewFile);
  };

  const previewFile = function(file) {
    const id = "upload" + wild(6);        
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function() {
      let temp = $("#uruntpl").html();
      temp = temp.replace(/{{id}}/ig, id);
      temp = temp.replace(/{{src}}/ig, reader.result);
      $("#rows").append(temp);
    };

    uploadFile(file, id);
  };

  const updateProgress = function(id, percent) {
    $("#" + id).find(".progress-bar").css("width", percent);

    if (percent === 100) {
      setTimeout(function(){
        $("#" + id).find(".progress-bar").fadeOut();
      }, 1000);
    }
  };

  const uploadFile = function(file, id) {
    const fd = new FormData();
    fd.append("file", file);

    $.ajax({
      url: "upload.php",
      type: "POST",
      dataType: "JSON",
      processData: false,
      contentType: false,
      data: fd,
      timeout: 30000,
      error: function () {
        toastr.warning("Sorun oluştu");
      },
      xhr: function () {
        const xhr = $.ajaxSettings.xhr();
        xhr.onprogress = function e() {
          if (e.lengthComputable) {
            updateProgress(id, (e.loaded * 100.0 / e.total) || 100);
          }
        };
        xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
            updateProgress(id, (e.loaded * 100.0 / e.total) || 100);
          }
        };
        return xhr;
      },
      success: function(json){
      }
    });
  };

  $(".fotoKutu").click(function(){
    $("#files-upload").click();
  });

  $("#files-upload").change(function(){
    handleFiles(this.files);
  });

  const files = document.getElementById("files");

  ["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
    files.addEventListener(eventName, preventDefaults, false);
    document.body.addEventListener(eventName, preventDefaults, false);
  });

  ["dragenter", "dragover"].forEach(eventName => {
    files.addEventListener(eventName, highlight, false);
  });

  ["dragleave", "drop"].forEach(eventName => {
    files.addEventListener(eventName, unhighlight, false);
  });

  files.addEventListener("drop", handleDrop, false);
});