이 글에서는 주로 HTML5 애플리케이션의 파일 업로드에 대해 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다.
개발자들은 오랫동안 이 문제를 해결하기 위한 솔루션으로 플래시를 채택해 왔습니다. 그러나 플래시는 만병통치약이 아닙니다. 플래시 버전은 다음과 같이 나뉩니다. 결과적인 문제는 때때로 악몽으로 변합니다. 일부 웹사이트에서는 양식 태그의 enctype=multipart/form-data 속성을 사용하지만 이 속성을 사용하려면 서버에서 진행 상황을 표시하기 위한 특별한 설정이 필요하며 복잡하기 때문에 오류가 발생하기 쉽습니다. 원하다.
이제 HTML5가 왜 이 문제를 해결할 수 있는지, 그리고 얼마나 잘 할 수 있는지 살펴보겠습니다.
HTML5로 파일 업로드
HTML5 표준에서는 XMLHttpRequest 객체가 재정의되어 "XMLHttpRequest Level 2"라고 합니다. 다음 5가지 새로운 기능이 추가되었습니다.
1. 파일, Blob 및 양식 데이터와 같은 바이트 스트림 업로드 및 다운로드 지원
2. 업로드 및 다운로드에 진행 이벤트 추가
3. 교차 도메인 요청 지원
4. 익명 요청 전송 허용(즉, HTTP의 Referer 부분 전송 안 함)
5. 요청 시간 초과 설정 허용
이 튜토리얼에서는 첫 번째와 두 번째 기능, 특히 두 번째 기능에 중점을 둘 것입니다. 이는 우리가 원하는 업로드 진행 상황을 제공합니다. 이전 솔루션과 달리 이 솔루션은 서버에 특별한 설정이 필요하지 않으므로 튜토리얼을 시청하면서 사용해 볼 수 있습니다.
위 다이어그램은 우리가 달성할 수 있는 것을 보여줍니다.
1. 업로드된 파일 정보를 표시합니다. 이름, 유형, 크기
2. 실제 진행 상황을 확인할 수 있는 진행 표시줄
3. 업로드 속도
예상 남은 시간
5. 업로드된 데이터의 양
6. 업로드가 완료된 후 서버에서 반환되는 응답
또한 XMLHttpRequest를 사용하면 전체 업로드 프로세스가 비동기식이므로 사용자가 업로드합니다. 파일 이때 웹페이지의 다른 요소를 계속 작동할 수 있으므로 업로드가 완료될 때까지 기다릴 필요가 없습니다. 업로드가 완료된 후 서버에서 응답을 다시 받을 수 있으므로 전체 업로드 프로세스가 상당히 논리적으로 보입니다.
HTML5 진행 이벤트
HTML5에는 다음 정보를 제공하는 새로운 진행 이벤트(진행 이벤트)가 있습니다.
1. 전체 - 파일 크기
2. 로드된 크기
3. 길이 계산 가능 - 진행률을 계산할 수 있는지 여부
정보가 많지 않지만 충분합니다. 파일 진행률을 계산합니다. 물론 직접적으로 알려주지 않는 부분이 많아서 아쉽습니다.
HTML
은 일반적인 파일 업로드 코드와 크게 다르지 않습니다. 그러나 입력 태그는 변경 시 JavaScript 함수와 연결됩니다.
<!DOCTYPE html>
<html>
<head>
<title>使用XMLHttpRequest上传文件</title>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<p class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</p>
<p id="progressNumber"></p>
</form>
</body>
</html>JavaScript
HTML에서 입력을 사용하면 JS 코드에서 FileList 객체를 얻을 수 있습니다. 이 개체는 HTML5에 새로 추가된 파일 API의 일부입니다. 각 FileList 개체는 파일 개체의 컬렉션이며 파일 개체에는 다음 속성이 있습니다.
1. 파일 이름(경로를 포함하지 않음)
2. type – 파일의 MIME 유형(소문자)
3. size – 파일의 크기(바이트)
이것이 우리가 요구하는 것입니다. 물론 HTML5에는 FileReader 객체가 있지만 여기서는 사용하지 않습니다. 이제 위의 세 가지 콘텐츠를 통해 사용자가 업로드하는 파일 크기와 파일 형식을 제어할 수 있게 되었고, 이를 통해 다시 감지할 때 서버에 대한 부담을 줄이고 보안 요소를 향상시킬 수 있게 되었습니다.
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}그럼 사용자가 파일을 선택하고 업로드를 클릭하면 어떻게 될까요?
function uploadFile() {
var xhr = new XMLHttpRequest();
var fd = document.getElementById('form1').getFormData();
/* event listners */
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
/* Be sure to change the url below to the url of your upload server side script */
xhr.open("POST", "upload.php");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}코드의 두 번째 줄에서 JS 코드는 HTML5에서 도입된 또 다른 새로운 개체인 FormData를 사용합니다. FormData 객체는 사용자 양식 데이터의 모음입니다. 양식 데이터를 키-값 쌍의 형태로 저장하며 해당 값에는 숫자, 문자열, 파일이 포함될 수 있습니다. 우리는 이 객체를 던져 서버에 데이터를 제출합니다.
물론 다음과 같이 코드에서 이 개체를 수동으로 구성할 수도 있습니다.
var fd = new FormData();
fd.append("author", "Shiv Kumar");
fd.append("name", "Html 5 File API/FormData");
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);주제로 돌아갑니다. 이전 코드를 되돌아 보면 XMLHttpRequest와 관련된 많은 이벤트 리스너를 추가했는데, 그 목적은 파일 업로드의 실제 상황을 얻는 것입니다. 우리가 연결하는 것은 XMLHttpRequest 자체가 아니라 uploadProgress와 같은 속성이라는 점에 유의하는 것이 특히 중요합니다.
전체 코드
마지막으로 전체 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "UploadMinimal.aspx");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<p class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</p>
<p id="progressNumber"></p>
</form>
</body>
</html>我们的任务完成了吗？可以说完成了，因为这段代码已经能够完成上传文件的任务，而且也能够显示上传的进度；但是理应说我们没有，因为除了这个骨架HTML之外，我们还有很多没有做的事情，比如CSS的美化等等。不过这就不是我们这篇文章的主题了。
最后，提醒一下，教程的代码应当在支持新特性的浏览器之上运行，如果你不清楚自己的浏览器是否支持，可以在这里查询。
相关文章：
JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
위 내용은 HTML5 애플리케이션의 파일 업로드에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
