programing

JavaScript:파일 업로드

shortcode 2022. 9. 25. 15:40
반응형

JavaScript:파일 업로드

페이지에 다음과 같은 요소가 있다고 가정합니다.

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

그러면 웹 페이지 사용자가 OS "File open.."을 통해 파일을 선택할 수 있는 버튼이 생성됩니다." 대화상자가 나타납니다.

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

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

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

여기서 서버가 URL "/upload/image"에서 여러 부분으로 구성된 POST를 처리한다고 가정합니다.

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

또한 파일 업로드가 완료되었다는 알림은 어떻게 수신해야 합니까?

순수 JS

선택적으로 wait-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)); 
    
    const ctrl = new AbortController()    // timeout
    setTimeout(() => ctrl.abort(), 5000);
    
    try {
       let r = await fetch('/upload/image', 
         {method: "POST", body: formData, signal: ctrl.signal}); 
       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.timeout = 5000;
    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(물론 두 주소 모두 임의이며 서버에 따라 다릅니다.또한 param과 같은 상황입니다.method서버에서는, 통상, 파일 업 로드에는 「POST」가 사용되고 있습니다만, 「PUT」등도 사용할 수 있습니다.
  • 한 번의 요청으로 많은 파일을 전송하려는 경우multiple속성:<input multiple type=... />선택한 모든 파일을 동일한 방법으로 formData에 첨부합니다(예:photo2=...files[2];...formData.append("photo2", photo2);)
  • 요청할 추가 데이터(json)를 포함할 수 있습니다. let user = {name:'john', age:34}다음과 같이 합니다.formData.append("user", JSON.stringify(user));
  • 타임아웃을 설정할 수 있습니다.fetch사용.AbortController, 의 오래된 접근법xhr.timeout= milisec
  • 이 솔루션은 모든 주요 브라우저에서 작동합니다.

Ajax를 사용하여 파일을 업로드하려는 것이 아니라면 다음 주소로 양식을 제출하십시오./upload/image.

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

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

저는 한동안 이것을 하려고 노력했지만, 이 대답들 중 어느 것도 제게는 효과가 없었습니다.이렇게 했어요.

선택 파일과 제출 버튼이 있었습니다.

<input type="file" name="file" id="file">
<button onclick="doupload()" name="submit">Upload File</button>

그리고 내 Javascript 코드에 이걸 넣었어

function doupload() {
    let data = document.getElementById("file").files[0];
    let entry = document.getElementById("file").files[0];
    console.log('doupload',entry,data)
    fetch('uploads/' + encodeURIComponent(entry.name), {method:'PUT',body:data});
    alert('your file has been uploaded');
    location.reload();
};

StackSnippets를 좋아하는 경우...

function doupload() {
    let data = document.getElementById("file").files[0];
    let entry = document.getElementById("file").files[0];
    console.log('doupload',entry,data)
    fetch('uploads/' + encodeURIComponent(entry.name), {method:'PUT',body:data});
    alert('your file has been uploaded');
};
<input type="file" name="file" id="file">
<button onclick="doupload()" name="submit">Upload File</button>

PUT방법은 약간 다릅니다.POST에서는, 「」가 됩니다.POST이치노

웹 서버에서 크롬 테스트 완료 - https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

참고- Chrome용 웹 서버를 사용하는 경우 고급 옵션으로 이동하여 '파일 업로드 활성화' 옵션을 선택해야 합니다.그렇지 않으면 허용되지 않는 오류가 발생합니다.

언급URL : https://stackoverflow.com/questions/5587973/javascript-upload-file

반응형