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>)
요약
- 서버측에서는, 원래의 파일명(및 그 외의 정보)을 읽어낼 수 있습니다.이 파일명은 브라우저에 의해서 자동적으로 요구됩니다.
filename
formData 파라미터 - 요청 헤더를 설정할 필요가 없습니다.
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
'programing' 카테고리의 다른 글
HTML "no-js" 클래스의 목적은 무엇입니까? (0) | 2022.09.25 |
---|---|
배열 목록을 알파벳 순으로 정렬(대문자와 소문자를 구분하지 않음) (0) | 2022.09.25 |
매개 변수를 사용하여 MariaDB 저장 프로시저 삽입 (0) | 2022.09.25 |
휴지 상태에 인수 생성자가 필요하지 않은 이유는 무엇입니까? (0) | 2022.09.25 |
파일 크기를 MB, GB 등으로 포맷 (0) | 2022.09.25 |