Javascript'te yeni FormData() Nesnesi ve Çoklu Dosya Gönderimi
Bu new FormData(), yeni bir FormData nesnesi oluşturan bir JavaScript oluşturucu işlevidir. FormData nesnesi, öncelikle HTML formlarından gelen verileri işlemek için kullanılır ve AJAX veya getirme istekleri aracılığıyla verileri kolayca oluşturmanıza ve sunucuya göndermenize olanak tanır.
Yeni bir FormData nesnesi oluşturduğunuzda new FormData(), isteğe bağlı olarak bir HTML form öğesine bir başvuruyu argüman olarak geçirebilirsiniz. Bir form öğesi sağlanırsa, oluşturucu otomatik olarak metin girdileri, onay kutuları, radyo düğmeleri ve dosya girdileri gibi formun tüm giriş alanlarını toplar ve bunları FormData nesnesine ekler.
İşte form öğesi olmadan yeni bir FormData nesnesi oluşturmaya dair bir örnek:
Ve işte form öğesiyle yeni bir FormData nesnesi oluşturmaya dair bir örnek:
var formData = new FormData(formElement);
Bir FormData nesneniz olduğunda, . gibi yöntemleri kullanarak ek veriler ekleyerek onu düzenleyebilirsiniz append(). Bu, FormData nesnesine anahtar-değer çiftleri eklemenize olanak tanır; burada anahtar, alan adını ve değer, alan değerini temsil eder.
fetch()FormData nesneleri genellikle verileri sunucuya eşzamansız olarak göndermek için XMLHttpRequest işleviyle birlikte kullanılır . HTTP isteğinin bir parçası olarak dosyalar da dahil olmak üzere form verilerini paketlemek ve iletmek için kolay bir yol sağlarlar.
1.Tek bir anahtar-değer çifti ekleme:
formData.append('username', 'johnsmith');
Bu örnekte, “username” anahtarı ve “johnsmith” değeri FormData nesnesine eklenir.
2. Birden fazla anahtar-değer çifti ekleme:
formData.append('username', 'johnsmith');
formData.append('email', 'john@example.com');
formData.append('age', 25);
3. Bir dosya ekleme:
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
formData.append('file', file);
Bu örnekte, bir dosya giriş öğesi seçilir ve seçilen dosya FormData nesnesine eklenir. Bu, dosyaları form verilerinizin bir parçası olarak yüklemenize olanak tanır.
4. Aynı anahtar için bir değer dizisi ekleme:
var colors = ['red', 'blue', 'green'];
for (var i = 0; i < colors.length; i++) {
formData.append('color', colors[i]);
}
Burada, bir renk dizisi üzerinde yineleme yapılır ve her renk FormData nesnesine aynı anahtar "color" ile eklenir. Bu, aynı alan adı için birden fazla değer göndermek istediğinizde yararlı olabilir.
Bu örnekler, FormData'daki yöntemin bazı yaygın kullanımlarını göstermektedir append(). Form verileriyle çalışırken bunları kendi özel ihtiyaçlarınıza ve gereksinimlerinize uyacak şekilde uyarlayabilirsiniz.
event.preventDefault();
var payload = $( this ).serialize() );
// this will create a method creates a text string in standard URL-encoded notation
// Now we will add additional parameter id in our payload
// Method 1: By simply appending to the url string
payload+ "&id=" + 12
// Method 2: If you are using Arrays() ,You need to use serializeArray() Then you can use
var formData = $('#contact_form').serializeArray();
formData.push({ name: "<something>", value: "<somevalue>" });
// Method 3: By serializeObject
var payload = $JQ("#moveFolderForm").serializeObject();
payload.id = 1;
});
Çoklu Dosya Yüklemeleri Nerelerde Yardımcı Olabilir?
Çoklu dosya yüklemeleri, web uygulamalarında geniş bir uygulanabilirliğe sahiptir ve kullanıcıların dosya işlemeyi gerektiren hemen hemen her görev için kullanıcı deneyimini ve verimliliğini artırır: Resim Galerileri ve Portföyleri, belge yönetim sistemleri (sözleşmeler, faturalar, raporlar, vb.), Youtube ve Vimeo gibi video paylaşım platformları, bulut depolama hizmetleri (AWS S3 ve benzeri) ve tabii ki kullanıcıların resim eklemesini gerektiren hemen hemen her kullanım durumu için çevrimiçi formlar.
Bu kılavuzda iki şey öğreneceksiniz. İlk olarak, JavaScript kullanarak birden fazla resim ve videoyu nasıl yükleyebileceğinizi göreceğiz ve ardından, kullanıcıların daha kolay, daha güvenli ve ayrıntılı bir şekilde resim ve video yüklemelerine olanak tanıyan SDK'lar ve API'ler sağlayan güçlü ve kullanımı kolay bir Dijital Varlık Yönetim sistemi olan ImageKit'i kullanarak daha hızlı ve daha akıcı bir yaklaşımı keşfedeceğiz.
JavaScript Kullanarak Birden Fazla Dosya Yükleme
Öncelikle dosyalarımızı JavaScript aracılığıyla, dosya yüklemelerini yönetebilen bir sunucuya nasıl yükleyeceğimizi ele alalım.
Birden fazla girdi öğesi içeren bir HTML formu oluşturarak başlayacağız, ardından kullanıcı tarafından seçilen dosyaları yakalamak için olay dinleyicileri ekleyeceğiz. Dosyaları ve meta verilerini yeni bir FormData nesnesinde depolayacağız, ardından son olarak dosyaları yüklemek için XMLHttpRequest aracılığıyla sunucuya bir AJAX isteği göndereceğiz.
İşte inşa edeceğimiz şey bu.
Adım 1: Çoklu dosya seçimlerine izin veren bir dosya giriş öğesi içeren bir HTML formu oluşturun
<input type="file" id="fileInput" name="files[]" multiple accept="image/*,video/*"/>
<button type="button" id="uploadButton">Upload Files</button>
</form>
Sağlanan HTML kodu, kullanıcıların birden fazla dosya seçmesine izin veren bir dosya giriş öğesiyle basit bir form oluşturur. " " olarak ayarlanan enctype özelliği öğelerin gerçekten dosya verisi yüklemesini multipart/form-datasağlar , öğedeki multiple niteliği çoklu dosya seçimini etkinleştirir ve isteğe bağlı olarak accept özelliğini ve olarak ayarlamak kullanıcının yalnızca bu türlerdeki dosyaları yüklemesine izin verir.<input><input type="file">“image/*”“video/*”
Adım 2: Dosya seçimini yakalamak için bir olay dinleyicisi ekleyin
const uploadButton = document.getElementById("uploadButton");
uploadButton.addEventListener("click", uploadFiles);
Formumuzun yükleme düğmesine tıklandığında, olay dinleyicisi, "uploadFiles"dosyaları yüklemeye hazırlamak ve sunucuya göndermek de dahil olmak üzere dosya yükleme sürecini yönetmekten sorumlu olan işlevi tetikleyecektir. Şimdi bu işlevi kodlayalım.
Adım 3: Dosyaları Depolamak İçin FormData'yı Kullanın
event.preventDefault();
const fileInput = document.getElementById("fileInput");
const selectedFiles = fileInput.files;
// Check if any files are selected
if (selectedFiles.length === 0) {
alert("Please select at least one file to upload.");
return;
}
}
Öncelikle seçilen dosyaları alıyoruz (hiçbir dosyanın seçilmediği durumu kapsayacak şekilde bazı hata işleme mantığıyla).
Daha sonra bunları depolamak için JavaScript FormData nesnesini kullanırız .
// Create a FormData object to store the form data
const formData = new FormData();
// Append each selected file to the FormData object
for (let i = 0; i < selectedFiles.length; i++) {
formData.append("files[]", selectedFiles[i]);
}
}
Artık dosyalarımız AJAX isteğiyle sunucuya gönderilmeye hazır.
FormData'yı spread operatörünü kullanarak console.log'unda gösterebilirsiniz.
console.log([...formData])
FormData'nın şu şekilde yapılandırıldığını göreceksiniz:
[
["files[]", [object File] ],
["files[]", [object File] ],
["files[]", [object File] ]
]
Bir dizi tuple, ilk çifti “files[]” adlı bir anahtar ve değeri bir File nesnesi. Bu çiftteki değerin içeriğini görmek için şunun gibi bir şey yapabiliriz:
for (const pair of formData.entries()) {
console.log(
pair[0],
pair[1].name + ", " + pair[1].size + ", " + pair[1].type + ", " + pair[1].lastModifiedDate
);
}
Artık, yükleme için seçtiğiniz dosyalara tam olarak ne olduğunu görebileceksiniz. Bu formData nesnesi, her dosyanın bayt cinsinden boyutunu, MIME türünü ve en son ne zaman değiştirildiğine dair zaman damgasını içerir.
files[], vacation-lossless.png, 699409, image/png, 2023-08-24T18:00:32.000Z
files[], funny-cat.mp4, 421208, video/mp4, 2023-08-22T17:53:14.218Z
Bu verileri bir AJAX isteği olarak gönderdiğimizde, bu dizi üzerinde yineleme yaparak her dosyayı yükleme uç noktanıza tek tek gönderir.
Adım 4: XMLHttpRequest kullanarak AJAX isteğini gönderin
xhr.open("POST", "/uploadFiles", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// Handle successful response from the server
console.log('Files uploaded successfully!');
alert("Files uploaded successfully!");
} else {
// Handle error response from the server
console.error('Failed to upload files.');
alert("Error occurred during file upload. Please try again.");
}
}
};
xhr.send(formData);
XMLHttpRequest nesnesi AJAX isteğini oluşturur ve gönderir . İstek yöntemi "POST" olarak ayarlanır, URL dosya yüklemelerini işleyen uç noktaya işaret eder ( “/uploadFiles"bu durumda sunucudaki uç noktaya ulaşıyoruz ) ve FormData nesnemiz gönderilen istek yüküdür.
Serialize, Dosya ve Özel Datayı Aynı Anda Yollamak İçin
//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $('input[name="my_images"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append('key', 'value');
$.ajax({
url: "URL",
method: "post",
processData: false,
contentType: false,
data: data,
success: function (data) {
//success
},
error: function (e) {
//error
}
});
veya
url: "ajax.php",
type: "POST",
data: new FormData('form'),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});
JQuery İle POST
type: "POST",
url: 'index.php',
data: formdata,
dataType: "html",
contentType: false, //olması şart
processData: false, //olması şart
beforeSend: function () {
},
success: function (data) {
}
}).done(function () {
});
Kaynak
- https://medium.com/@nandaras0103/new-formdata-object-in-javascript-674350f9bf72
- https://imagekit.io/blog/uploading-multiple-files-using-javascript/
- https://stackoverflow.com/questions/4545081/how-to-do-file-upload-using-jquery-serialization
