페이지 에이 요소가 있다고 가정 해 봅시다.

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

그러면 웹 페이지 사용자가 브라우저의 OS “파일 열기 …”대화 상자를 통해 파일을 선택할 수있는 버튼이 생성됩니다.

사용자가 해당 버튼을 클릭하고 대화 상자에서 파일을 선택한 다음 “확인”버튼을 클릭하여 대화 상자를 닫았다 고 가정 해 봅시다.

선택한 파일 이름이 이제 다음 위치에 저장됩니다.

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

이제 서버가 URL “/ upload / image”에서 멀티 파트 POST를 처리한다고 가정 해 봅시다.

파일을 “/ upload / image”로 보내려면 어떻게합니까?

또한 파일 업로드가 완료되었다는 알림을 들으려면 어떻게합니까?

답변

ajax를 사용하여 파일을 업로드하지 않는 한 양식 을에 제출하십시오/upload/image .

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

이미지를 백그라운드에서 업로드하려면 (예 : 전체 양식을 제출하지 않고) ajax를 사용할 수 있습니다.

답변

순수한 JS

await-try-catch와 함께 fetch를 선택적으로 사용할 수 있습니다.

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)

스 니펫 확장

구식 접근-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>)

스 니펫 확장

요약

서버 측에서는 브라우저가 filenameformData 매개 변수 에 요청하도록 자동으로 포함 된 원본 파일 이름 (및 기타 정보)을 읽을 수 있습니다 .
당신은 설정 요청 헤더 필요가 없습니다 Content-Type에 multipart/form-data-이 브라우저에 의해 자동으로 설정됩니다.
대신 /upload/image전체 주소를 사용할 수 있습니다 http://.../upload/image.
단일 요청으로 많은 파일을 보내려면 multipleattribute : <input multiple type=... />를 사용하고 선택한 모든 파일을 비슷한 방식으로 formData에 첨부하십시오 (예 : photo2=...files[2];… formData.append("photo2", photo2);)
다음과 같이 요청하기 위해 추가 데이터 (json)를 포함 할 수 있습니다 let user = {name:'john', age:34}.formData.append("user", JSON.stringify(user));
이 솔루션은 모든 주요 브라우저에서 작동해야합니다.