Yazılım Çorbası: Http Post ve multipart/form-data

Giriş
Http ile POST işlemi için 3 seçenek var.

1. application/x-www-form-urlencoded (the default)
2. multipart/form-data
3. text/plain

application/x-www-form-urlencoded
Sorgu string'i gibi şeyleri göndermek için kullanılır.

multipart/form-data
Dosya yüklemek için kullanılır. Dosya yüklemek için kullanılır. Açıklaması şöyle.

The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters. The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.

text/plain
Tam olarak ne işe yarar bilmiyorum.

HTML

Dosya yüklemek için tarayıcı tarafında 2 çözüm var

1. <form> tag'ini kullanmak

2. <input> tag'ini type="file" şeklinde kullanmak ve AJAX çağrısı yapmak. AJX kullanımı tüm sayfayı tekrar yenilemeye gerek olmadığı için tercih edilebilir

Örnek - HTML Form

Şöyle yaparız

<form method="post" action="fileuploadservlet" enctype="multipart/form-data">
  <input type="file" name="file1" />
  <input type="file" name="file2" />
  <input type="file" name="file3" />
  <input type="submit" value="Upload" />
</form>

Örnek - AJAX

Şöyle yaparız. Burada AJAX kütüphanesi olarak tarayıcıda yerleşik bulunan window.fetch kullanılıyor

<!-- HTML5 Input Form Elements -->
<input id="fileupload" type="file" name="fileupload" /> 
<button id="upload-button" onclick="uploadFile()"> Upload </button>

<!-- Ajax JavaScript File Upload Logic -->
<script>
  async function uploadFile() {
    let formData = new FormData(); 
    formData.append("file", fileupload.files[0]);
    await fetch('/fileuploadservlet', {
      method: "POST", 
      body: formData
    }); 
    alert('The file has been uploaded successfully.');
  }
</script>

multipart/form-data Nedir?
Post isteğinde önce Content-Type gönderilir. Bu alan multipart isteğin başladığını ve her bir part arasındaki ayracı belirtir. Tüm multipart'ın büyüklüğü Content-Length ile belirtilir.

Her bir part Content-Disposition ile başlar. Bu alan part'ın ismini ve kaydedilecekse dosya ismini belirtir.
Ayrıca part'ın tipi de Content-Type ile belirtilir.

Örnek
Post isteği şöyle başlar.

Content-Type: multipart/form-data; boundary=----------735323031399963166993862150
Content-Length: 8341

Örnek
Eğer metin göndereceksek şöyle bir html görürüz.

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="text1"

mytext

Örnek
Eğer a.txt dosyasını göndereceksek şöyle bir html görürüz.

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="file1"; filename="a.txt"
Content-Type: text/plain

Content of a.txt.

Örnek
Eğer html göndereceksek şöyle bir html görürüz.

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="file2"; filename="a.html"
Content-Type: text/html

<!DOCTYPE html><title>Content of a.html.</title>

Örnek
Eğer octect göndereceksek şöyle bir html görürüz.

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="file3"; filename="binary"
Content-Type: application/octet-stream

Byte'lar

Örnek
Content-Length tüm parçaların toplam uzunluğu verir. Şöyle yaparız.

Content-Type: multipart/form-data; boundary=---------------------------1294919323195
Content-Length: 502
-----------------------------1294919323195
Content-Disposition: form-data; name="number"

5555555555
-----------------------------1294919323195
Content-Disposition: form-data; name="clip"

rickroll
-----------------------------1294919323195
Content-Disposition: form-data; name="upload_file"; filename=""
Content-Type: application/octet-stream


-----------------------------1294919323195
Content-Disposition: form-data; name="tos"

agree
-----------------------------1294919323195--

Yazılım Çorbası

20 Aralık 2017 Çarşamba

Http Post ve multipart/form-data - Dosya(lar) Yüklemek İçindir

Hiç yorum yok:

Yorum Gönder

Blog Arşivi