자바 스크립트 : 파일 업로드

189

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

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

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

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

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

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

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

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

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

javascript file-upload

— 맛있는 반미
소스

JavaScript는 서버 측이므로 업로드를 처리하지 않습니다. 서버 측 스크립트는 파일을받은 다음 이동합니다. 임시 폴더에서 원하는 폴더로 PHP의 경우.

— Bakudan

여기서 PHP를 사용하여 멋진 솔루션을 찾았습니다

— mld

jQuery가 아닌 POJS (일반 오래된 자바 스크립트)에 관한 질문이기 때문에 다시 열기로 투표했습니다 .

— e2-e4

답변:

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

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

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

— 매트 볼
소스

또는 src = ""안에 이미지 업 로더 스크립트가있는 iframe 0x0 크기를 지정하고 target = "iframeId"를 사용하여 양식을 게시하여 iQuery src .load 이벤트에서 결과를 다시 읽습니다 (예 : jQuery를 사용하여 바인딩 할 수 있음).

— Dmitry

그것은 참조, 요즘 자바 스크립트와 Ajax를 통해 upvote에 실제로 가능 : stackoverflow.com/a/10811427/694469은 (내가 downvote하지 않았다).

— KajMagnus

@ Kaajagnus, 당신은 아마 '업로드'를 의미하지만 실수로 '공개'라고 말했다

— Samuel Allan

순수한 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));
이 솔루션은 모든 주요 브라우저에서 작동해야합니다.

— 카밀 키에브 제 스키
소스

나를 위해 완벽하게 일하십시오.

— Trieu Nguyen

formData === 양식 제출enctype="multipart/form-data"

— xgqfrms

오류가 발생했습니다net::ERR_ABORTED 405 (Method Not Allowed)

— Hidayt Rahman

@HidaytRahman이 오류는 일반적으로 서커스가 귀하의 URL에 POST 메소드를 구현하지 않을 때 나타납니다

— Kamil Kiełczewski

이상한-당신의 제목에 따라 더 이상 서버가 필요하지 않다고 생각했습니다 : D

— Hidayt Rahman