jQuery ve Ajax Kullanarak FormData() ileDosya Upload Etmek
Ayrıca jQuery ve Ajax kullanımı, kullanıcı dosyayı seçtikten sonra, ek bir yükleme düğmesine gerek kalmadan dosyayı yüklememize olanak tanır.
Ses dosyasını nasıl yüklüyorsunuz?
Kullanıcıya bir ses dosyası yükleme seçeneği sunan bir formu ele alalım. Yüklenecek ses dosyasını belirtmek için bir giriş alanı olacak.
HTML5'te sağlanan bir ses etiketi kullanılarak ses dosyası çalınabilir.
Bir kullanıcı yüklenmek üzere bir dosya seçtiğinde, değişiklik olayı tetiklenir. jQuery kullanarak bu değişiklik olayını işleriz.
//on change event
formdata = new FormData();
if($(this).prop('files').length > 0)
{
file =$(this).prop('files')[0];
formdata.append("music", file);
}
});
Bir sonraki adım ajax kullanmak, formu göndermek ve dosyayı yüklemektir.
url: php_file_path,
type: "POST",
data: formdata,
processData: false, //bu şekilde tanımlamazsanız çalışmayacaktır.
contentType: false, //bu şekilde tanımlamazsanız çalışmayacaktır.
success: function (result) {
// if all is well
// play the audio file
}
});
Gönderi üzerine, istek sunucuya gönderilecektir. Yüklenen dosyada herhangi bir hata olup olmadığını test etmeniz ve ardından yüklemeniz gerekir. Bu, PHP kullanılarak yapılacaktır.
{
$file = $_FILES["music"]["tmp_name"];
// now you have access to the file being uploaded
//perform the upload operation.
move_uploaded_file( $file, "uploads/" . $file);
}
Bir başka örnek:
var formdata = new FormData();
Dosya = $(DosyaKonum).prop('files')[0];
formdata.append("sendfile", Dosya);
formdata.append("tocagrupno", {TocaGrupNo});
$.ajax({
type: "POST",
url: '/{Klasor}TabTOCAdosyaislemleri.php',
data: formdata,
dataType: "html",
contentType: false,
processData: false,
beforeSend: function () {
//DugmeleriKitle();
topbar.show();
},
success: function (data) {
//DugmeleriAc();
topbar.hide();
$('#SendFileBody').html(data);
//document.write(data);
$(DosyaKonum).val('');
JQMesaj('File uploaded...', 'Alert', null, null, null, 'SendFile', 'bg-warning text-white');
}
}).done(function () {
});
}
Böylece, AJAX ve jQuery kullanarak temel gereksinime ek bir özellik sunabildik. Müşteriler için özellikler geliştirirken, işlevsellik açısından ana amaç her zaman istikrarlı ve eksiksiz bir çözüm sağlamaktır. Ancak, mutlu müşterileri garantilemek için çözümün bir parçası olarak kolaylık özellikleri eklemek için her zaman ek çaba ve ilgi gösteriyoruz.
WordPress web siteniz için özel bir özellik veya işlevselliğe ihtiyacınız varsa, Uzmanlarımızla iletişime geçmekten çekinmeyin. Bölümlere ayrılmış kod kullanırlar ve her zaman hızlı web sitesi yükleme hızı sağlarlar. Aşağıdaki bağlantıyı kullanarak gereksinimlerinizi açıklamak için ücretsiz bir danışmanlık randevusu alabilirsiniz.
Kaynak
