JS / html / form / XML HttpRequest Ajax 파일 / 그림 을 대량으로 업로드 하 는 3 가지 방식
사진 을 올 리 는 것 은 모두 jQuery 플러그 인 이기 때문에 순수 js 의 굴 기 를 위해 ajax 업로드 방식 을 선 택 했 지만 관련 인 스 턴 스 를 찾 을 때 어려움 이 많 았 습 니 다. 이 업로드 기능 만 왕복 테스트 를 한 지 이틀 이 채 되 지 않 아 결국 어려움 을 이 겨 냈 습 니 다.
다음 세 가지 방식 은 모두 여러 차례 의 테스트 를 거 쳐 통과 된다.
중요 설명:
첫 번 째: 기억 하기: form - > enctype="multipart/form-data"
두 번 째: 기본 submit: event. preventDefault () 를 막 습 니 다.
세 번 째: var formData = new FormData ();
formData.append('photos', file);
xhr.send(formData);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax </title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<h1>1、 HTML </h1>
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>
<form id="file-form">
<h1>2、JS post form file</h1>
<input type="file" name="images" multiple accept="image/*"/>
<button type="submit" name="btn"> </button>
</form>
<div>
<h1>3、JS Ajax post file</h1>
<input type="file" id="files" name="photos" multiple accept="image/*"/>
<button type="submit" id="upload"> </button>
</div>
<script>
// JS post form file
var form = document.getElementById('file-form');
form.onsubmit = function(event) {
event.preventDefault();
var files = form.images.files;
var file = files[0];
var formData = new FormData();
formData.append('images', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
form.btn.innerText = ' ！';
console.log('Upload Finished!!!!!!!!!!');
} else {
alert('An error occurred!');
}
};
xhr.send(formData);
};
var files = document.getElementById('files');
var uploadBtn = document.getElementById('upload');
uploadBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
uploadBtn.innerHTML = 'Upload Finished';
} else {
alert('An error occurred!');
}
};
var file = files.files[0];
var formData = new FormData();
formData.append('photos', file);
xhr.send(formData);
}
</script>
</body>
</html>좋은 웹페이지 즐겨찾기
