Katakanlah saya memiliki elemen ini di halaman:

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

Ini akan membuat tombol yang memungkinkan pengguna halaman web untuk memilih file melalui dialog "File open ..." di browser.

Katakanlah pengguna mengklik tombol berkata, memilih file dalam dialog, lalu mengklik tombol "Oke" untuk menutup dialog.

Nama file yang dipilih sekarang disimpan di:

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

Sekarang, katakanlah server menangani POST multi-bagian di URL "/ unggah / gambar".

Bagaimana cara mengirim file ke "/ unggah / gambar"?

Juga, bagaimana saya mendengarkan pemberitahuan bahwa file sudah selesai diunggah?

Kecuali Anda mencoba mengunggah file menggunakan ajax, cukup kirimkan formulir ke /upload/image.

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

Jika Anda ingin mengunggah gambar di latar belakang (mis. Tanpa mengirimkan seluruh formulir), Anda dapat menggunakan ajax:

• Unggahan file tidak sinkron (unggah file AJAX) menggunakan jsp dan javascript
• Unggah File jQuery Ajax
• Ajax menggunakan unggahan file

JS murni

Anda dapat menggunakan pengambilan secara opsional dengan await-try-catch

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)

Pendekatan sekolah lama - 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>)

RINGKASAN

• Di sisi server Anda dapat membaca nama file asli (dan info lainnya) yang secara otomatis disertakan untuk diminta oleh browser dalam filenameparameter formData.
• Anda TIDAK perlu set header permintaan Content-Typeuntuk multipart/form-data- ini akan diatur secara otomatis oleh browser.
• Alih-alih /upload/imageAnda dapat menggunakan alamat lengkap seperti http://.../upload/image.
• Jika Anda ingin mengirim banyak file dalam multipleatribut penggunaan permintaan tunggal <input multiple type=... />:, dan lampirkan semua file yang dipilih ke formData dengan cara yang sama (misalnya photo2=...files[2];... formData.append("photo2", photo2);)
• Anda dapat memasukkan data tambahan (json) ke permintaan misalnya let user = {name:'john', age:34}dengan cara ini:formData.append("user", JSON.stringify(user));
• Solusi ini harus bekerja pada semua browser utama.