jQuery AJAX ve PHP ile Toplu Resim Dosyaları Nasıl Yüklenir?
Sayfanın tamamını yenilemeden dosya yüklemek, daha kullanıcı dostu bir deneyim sunduğundan web geliştirmede tercih edilen bir yöntem haline geldi. Bu yaklaşım, anında görüntü ön izleme gösterimine olanak tanıyarak web sitesi veya uygulamayla etkileşimi ve etkileşimi artırır.
Bu eğitimde, sayfa yenilemeye gerek kalmadan birden fazla görüntü dosyası yüklemek ve önizlemeleri görüntülemek için jQuery AJAX ve PHP'nin gücünden nasıl yararlanacağımı göstereceğim . Bu teknik, web uygulamalarınızın işlevselliğini ve etkileşimini geliştirerek kullanıcıların birden fazla görüntüyü sorunsuz ve verimli bir şekilde seçip yüklemesine olanak tanır.
- HTML: Dosya yükleme düzeni oluşturun
- jQuery: Çoklu Dosya Yükleme AJAX isteğini kurun
- PHP: Çoklu Dosya Yükleme İşlemini Yönetin
- Çıktı
- Çözüm
1. HTML: Dosya yükleme düzeni oluşturun
Dosya yükleme formu oluşturmak için:
- Temel bir HTML ile başlayın
<form>. - kullanarak bir dosya giriş öğesi ekleyin
<input type="file">. multipleÖzniteliği dosya girişine ekleyerek çoklu dosya seçimini etkinleştirin .- name niteliğini, olarak ayarlayarak bir dizi türü olarak kullanın
name='files[]'. - Seçilen dosyaları yüklemek için forma bir düğme ekleyin.
<div>Başarılı yükleme sonrasında jQuery AJAX kullanarak görüntü önizlemelerini görüntülemek içinid='preview'.
<style type="text/css">
#preview img{
kenar boşluğu: 5 piksel;
}
</style>
<form method='post' action='' enctype="multipart/form-data">
<input type="file" id='files' name="files[]" multiple><br>
<input type="button" id="submit" value='Upload'>
</form>
<!-- Preview -->
<div id='preview'></div>
#preview img{
kenar boşluğu: 5 piksel;
}
</style>
<form method='post' action='' enctype="multipart/form-data">
<input type="file" id='files' name="files[]" multiple><br>
<input type="button" id="submit" value='Upload'>
</form>
<!-- Preview -->
<div id='preview'></div>
2. jQuery: Çoklu Dosya Yükleme AJAX isteğini ayarlayın
- Yükleme düğmesine ( ) tıklandığında bir nesne
#submitoluşturun .FormData - kullanılarak seçilen toplam dosya sayısını sayın
$('#files')[0].files.length. - Seçilen dosyalar arasında dolaşın ve bunları nesneye ekleyin
form_data. - Veri olarak
ajaxfile.phpileterek adresine bir AJAX POST isteği gönderin .form_data - kullanarak veri türünü JSON olarak ayarlayın
dataType: 'json'. - ve
contentTypeolarak ayarlayın . _falseprocessDatafalse - Başarılı geri aramada, dosya yollarını almak için yanıtta döngü yapın.
- Görüntü kaynağının değişkenini kullanarak
<img>öğesine bir öğe ekleyin .<div id='preview'>src
$(document).ready(function(){
$('#submit').click(function(){
var form_data = new FormData();
// Seçilen dosyaları oku
var totalfiles = document.getElementById('files'). dosyalar.uzunluk;
for (var indeks = 0; indeks < toplamdosyalar; indeks++) {
form_data.append("dosyalar[]", document.getElementById('dosyalar').dosyalar[index]);
}
// AJAX isteği
$. ajax({
url: 'ajaxfile.php',
type: 'post',
data: form_data,
dataType: 'json',
contentType: false,
prosesData:YANLIŞ,
başarı: fonksiyon (yanıt) {
for(var indeks = 0; indeks < yanıt.uzunluk; indeks++) {
var src = yanıt[dizin];
// img öğesini <div id='preview'> içine ekleyin
$('#preview').append('<img src="'+src+'" width="200px;" height="200px">');
}
}
});
});
});
$('#submit').click(function(){
var form_data = new FormData();
// Seçilen dosyaları oku
var totalfiles = document.getElementById('files'). dosyalar.uzunluk;
for (var indeks = 0; indeks < toplamdosyalar; indeks++) {
form_data.append("dosyalar[]", document.getElementById('dosyalar').dosyalar[index]);
}
// AJAX isteği
$. ajax({
url: 'ajaxfile.php',
type: 'post',
data: form_data,
dataType: 'json',
contentType: false,
prosesData:YANLIŞ,
başarı: fonksiyon (yanıt) {
for(var indeks = 0; indeks < yanıt.uzunluk; indeks++) {
var src = yanıt[dizin];
// img öğesini <div id='preview'> içine ekleyin
$('#preview').append('<img src="'+src+'" width="200px;" height="200px">');
}
}
});
});
});
3. PHP: Çoklu Dosya Yüklemeyi Yönetin
- Yüklenen dosyaları depolamak için bir
ajaxfile.phpdosya ve adlı bir klasör oluşturun.uploads - kullanarak istekte alınan toplam dosya sayısını sayın
count($_FILES['files']['name']). - Yükleme konumunu klasöre ayarlayın
uploads/. $files_arrBaşarılı bir yüklemeden sonra dosya yollarını depolamak için çağrılan boş bir dizi oluşturun .- Dosyadaki her dosyada döngü yapın
$_FILES. - Dosya adının mevcut olup olmadığını ve boş olup olmadığını kontrol edin.
- Kullanarak dosya adını alın
$_FILES['files']['name'][$index]. - Kullanarak dosya uzantısını alın
pathinfo($filename, PATHINFO_EXTENSION). - adlı geçerli resim uzantılarından oluşan bir dizi tanımlayın
$valid_ext. - Dosya uzantısının dizide olup olmadığını kontrol edin
$valid_ext. - Uzantı geçerliyse yükleme konumunu ve dosya adını kullanarak dosya yolunu oluşturun.
- kullanarak dosyayı geçici konumdan belirtilen yola taşıyın
move_uploaded_file(). - Dosya yükleme başarılı olursa dosya yolunu diziye ekleyin
$files_arr. $files_arrkullanarak diziyi JSON formatına kodlayınjson_encode().$files_arrGörüntü önizlemesi veya daha ileri işlemler için kullanılacak JSON kodlu diziyi döndürün .
<?php
// Toplam dosyaları say
$countfiles = count($_FILES['files']['name']);
// Yükleme Konumu
$upload_location = "yüklemeler/";
// Yüklenen dosyaları depolamak için yol
$files_arr = array();
// Tüm dosyaları döngüye al
for($index = 0;$index < $countfiles;$index++){
if(isset($_FILES['files']['name'][$index]) && $_FILES['files' ]['isim'][$index] != ''){
// Dosya adı
$dosyaadı = $_FILES['dosyalar']['isim'][$index];
// Uzantıyı al
$ext = strtolower(yol bilgisi($dosyaadı, PATHINFO_EXTENSION));
// Geçerli resim uzantısı
$valid_ext = array("png", "jpeg", "jpg");
// Uzantıyı kontrol et
if(in_array($ext, $valid_ext)){
// Dosya yolu
$yol = $upload_location.$dosyaadı;
// Dosyayı yükle
if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
$files_arr[] = $path;
}
}
}
}
echo json_encode($files_arr);
?>
// Toplam dosyaları say
$countfiles = count($_FILES['files']['name']);
// Yükleme Konumu
$upload_location = "yüklemeler/";
// Yüklenen dosyaları depolamak için yol
$files_arr = array();
// Tüm dosyaları döngüye al
for($index = 0;$index < $countfiles;$index++){
if(isset($_FILES['files']['name'][$index]) && $_FILES['files' ]['isim'][$index] != ''){
// Dosya adı
$dosyaadı = $_FILES['dosyalar']['isim'][$index];
// Uzantıyı al
$ext = strtolower(yol bilgisi($dosyaadı, PATHINFO_EXTENSION));
// Geçerli resim uzantısı
$valid_ext = array("png", "jpeg", "jpg");
// Uzantıyı kontrol et
if(in_array($ext, $valid_ext)){
// Dosya yolu
$yol = $upload_location.$dosyaadı;
// Dosyayı yükle
if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
$files_arr[] = $path;
}
}
}
}
echo json_encode($files_arr);
?>
5. Sonuç
jQuery AJAX ve PHP kullanarak birden fazla görüntü dosyasının karşıya yüklenmesi sürecini ele aldım. Adımları takip ederek bir HTML formu oluşturmayı, jQuery AJAX ile form gönderimini nasıl gerçekleştireceğinizi ve PHP kullanarak sunucuya yapılan yüklemeleri nasıl işleyeceğinizi öğrendiniz.
Kodu değiştirerek bu işlevi diğer dosya türlerini destekleyecek şekilde genişletebilirsiniz. jQuery AJAX ve PHP ile kesintisiz ve verimli çoklu görüntü dosyası yüklemelerine olanak tanıyarak web uygulamalarınızı geliştirin.
Dosyaları şuradan indirebilirsiniz.
Kaynak
Yorumunuzu Ekleyin
