Hãy nói rằng tôi có yếu tố này trên trang:

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

Điều này sẽ tạo một nút cho phép người dùng trang web chọn một tệp thông qua hộp thoại "Mở tệp ..." của hệ điều hành trong trình duyệt.

Giả sử người dùng nhấp vào nút nói, chọn một tệp trong hộp thoại, sau đó nhấp vào nút "Ok" để đóng hộp thoại.

Tên tệp đã chọn hiện được lưu trữ trong:

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

Bây giờ, giả sử rằng máy chủ xử lý các POST nhiều phần tại URL "/ upload / image".

Làm cách nào để gửi tệp tới "/ upload / image"?

Ngoài ra, làm cách nào để tôi nghe thông báo rằng tệp đã được tải lên xong?

Trừ khi bạn đang cố tải lên tệp bằng ajax, chỉ cần gửi biểu mẫu đến /upload/image.

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

Nếu bạn muốn tải lên hình ảnh trong nền (ví dụ: không gửi toàn bộ biểu mẫu), bạn có thể sử dụng ajax:

• Tải lên tệp không đồng bộ (tải lên tệp AJAX) bằng jsp và javascript
• Tải lên tệp jQuery Ajax
• Ajax sử dụng tệp tải lên

Tinh khiết

Bạn có thể sử dụng tìm nạp tùy chọn với 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)

Phương pháp trường học cũ - 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>)

TÓM LƯỢC

• Ở phía máy chủ, bạn có thể đọc tên tệp gốc (và thông tin khác) được tự động đưa vào để yêu cầu bởi trình duyệt trong filenametham số formData.
• Bạn KHÔNG cần phải đặt tiêu đề yêu cầu Content-Typethành multipart/form-data- điều này sẽ được trình duyệt tự động đặt.
• Thay vì /upload/imagebạn có thể sử dụng địa chỉ đầy đủ như thế nào http://.../upload/image.
• Nếu bạn muốn gửi nhiều tệp trong một yêu cầu, hãy sử dụng multiplethuộc tính: <input multiple type=... />và đính kèm tất cả các tệp đã chọn vào formData theo cách tương tự (ví dụ photo2=...files[2];... formData.append("photo2", photo2);)
• Bạn có thể bao gồm dữ liệu bổ sung (json) để yêu cầu, ví dụ như let user = {name:'john', age:34}theo cách này:formData.append("user", JSON.stringify(user));
• Giải pháp này sẽ hoạt động trên tất cả các trình duyệt chính.