Diyelim ki sayfada bu öğe var:

<input id="image-file" type="file" />

Bu, web sayfası kullanıcılarının tarayıcıdaki bir OS "Dosya aç ..." iletişim kutusu aracılığıyla bir dosya seçmesine izin veren bir düğme oluşturur.

Kullanıcının söz konusu düğmeyi tıkladığını, iletişim kutusunda bir dosya seçtiğini ve ardından iletişim kutusunu kapatmak için "Tamam" düğmesini tıkladığını varsayalım.

Seçilen dosya adı artık şu konumda saklanıyor:

document.getElementById("image-file").value

Şimdi sunucunun "/ upload / image" URL'sinde çok parçalı POST'ları işlediğini varsayalım.

Dosyayı "/ upload / image" adresine nasıl gönderirim?

Ayrıca, dosyanın yüklenmesi bittiğini bildiren bildirimleri nasıl dinlerim?

Eğer ajax kullanarak dosyayı yüklemeye çalışıyor sürece, sadece formu göndermek için /upload/image.

<form enctype="multipart/form-data" action="/upload/image" method="post">
    <input id="image-file" type="file" />
</form>

Görüntüyü arka planda yüklemek istiyorsanız (örneğin, formun tamamını göndermeden), ajax'ı kullanabilirsiniz:

• Jsp ve javascript kullanarak eşzamansız dosya yükleme (AJAX dosya yükleme)
• jQuery Ajax Dosya Yükleme
• Dosya yüklemeyi kullanarak Ajax

Saf JS

Sen kullanabilirsiniz getirme bekliyoruz-try-catch, isteğe

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

async function SavePhoto(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Before selecting the file open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(in stack overflow snippets there is problem with error handling, however in <a href="https://jsfiddle.net/Lamik/b8ed5x3y/5/">jsfiddle version</a> for 404 errors 4xx/5xx are <a href="https://stackoverflow.com/a/33355142/860099">not throwing</a> at all but we can read response status which contains code)

Eski okul yaklaşımı - XHR

let photo = document.getElementById("image-file").files[0];  // file from input
let req = new XMLHttpRequest();
let formData = new FormData();

formData.append("photo", photo);                                
req.open("POST", '/upload/image');
req.send(formData);

function SavePhoto(e) 
{
    let user = { name:'john', age:34 };
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let photo = e.files[0];      
    
    formData.append("user", JSON.stringify(user));   
    formData.append("photo", photo);
    
    xhr.onreadystatechange = state => { console.log(xhr.status); } // err handling
    xhr.open("POST", '/upload/image');    
    xhr.send(formData);
}

<input id="image-file" type="file" onchange="SavePhoto(this)" >
<br><br>
Choose file and open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

<br><br>
(the stack overflow snippets, has some problem with error handling - the xhr.status is zero (instead of 404) which is similar to situation when we run script from file on <a href="https://stackoverflow.com/a/10173639/860099">local disc</a> - so I provide also js fiddle version which shows proper http error code <a href="https://jsfiddle.net/Lamik/k6jtq3uh/2/">here</a>)

ÖZET

• Sunucu tarafında, tarayıcı tarafından filenameformData parametresinde isteğe göre otomatik olarak dahil edilen orijinal dosya adını (ve diğer bilgileri) okuyabilirsiniz.
• Sen seti istek başlığında gerekmediğini Content-Typeiçin multipart/form-data- bu tarayıcı tarafından otomatik olarak ayarlanacaktır.
• Bunun yerine /upload/imagetam adresi kullanabilirsiniz http://.../upload/image.
• Tek bir istekte çok sayıda dosya göndermek istiyorsanız, multipleözniteliği kullanın : <input multiple type=... />ve seçilen tüm dosyaları formData'ya benzer şekilde ekleyin (örneğin photo2=...files[2];... formData.append("photo2", photo2);)
• Örneğin let user = {name:'john', age:34}şu şekilde talep etmek için ek veriler (json) ekleyebilirsiniz :formData.append("user", JSON.stringify(user));
• Bu çözümler tüm büyük tarayıcılarda çalışmalıdır.