기본 JavaScript는 비동기 다중 파일 upload_javascript 기술을 구현합니다.

이전 글을 수정한 글입니다. 백그라운드 코드만 변경되지 않으면 계속 사용할 수 있지만 스크립트는 더 이상 jQuery를 사용하지 않고 네이티브 JavaScript 코드로 대체되므로 JS 코드를 주로 살펴봅니다.

먼저 기술 매개변수를 소개합니다.

페이지 기술: HTML5

백엔드 기술: 서블릿 3.0

서버: Tomcat 7.0

스크립트: 자바스크립트

HTML5 파일 구성요소의 새로운 속성

accept : 파일 컴포넌트에 이 속성을 추가하면 업로드되는 파일 형식을 직접 제어할 수 있어 정말 편리합니다.

복수: 복수 파일 선택 허용 여부
HTML5 페이지 코드 수정됨

<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
　　<div id="son"></div>
</div>

accept 값은 IANA MIME 유형(표준 MIME 유형의 전체 목록)에서 찾을 수 있습니다. DW 개발을 사용하는 경우 소프트웨어 자체에 프롬프트가 표시됩니다.

여러 개의 파일을 선택하는 경우 JS를 사용하여 루프로 인쇄하여 파일의 이름, 유형 및 크기를 확인할 수 있습니다

function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
  " , 文件类型："+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}

이제 여러 파일을 반복할 수 있으므로 여러 파일을 업로드해 볼 수 있습니다.

1. 먼저 XMLHttpRequest 객체를 생성합니다

//전역변수입니다. 예시이기 때문에 브라우저 종류를 판단하지 않습니다. IE 하위 버전에서 이렇게 쓰면 문제가 발생합니다
var xhr = 새로운 XMLHttpRequest()
2. 이전 글에서는 프로그레스(Progress) 이벤트에 대해 소개했는데 이번에는 프로그레스(Progress)와 에러(Error) 두 가지 이벤트를 구현했습니다

오류: 요청에 오류가 발생할 때 트리거됩니다.

업로드 중 오류로 인한 업로드 실패에 해당: uploadFailed()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
　　progress：在接收相应期间持续不断触发。

　　　　　　对应上传进度方法：onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已经上传大小情况 
 var tot = evt.total;       //附件总大小 
 var per = Math.floor(100*loaded/tot);   //已经上传的百分比 
　 $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

마지막 단계는 업로드 메소드인데, 위 HTML 코드의 업로드 메소드도 uploadFile() 메소드로 변경해야 정상적으로 사용할 수 있다는 점에 유의하세요.

 //上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
　　 xhr.send(formData);
} 

PS: 결국 이는 기본 기능의 시연 예일 뿐이며 아직 회사의 요구 사항과는 거리가 멀습니다. 회사 플랫폼에서 사용할 때는 주의하세요.

이 기사를 결합하여 배울 수 있습니다. HTML5(jquery 버전) 기반 Ajax 파일 업로드 진행률 표시줄을 구현하는 방법

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.