HTML 5 Ajax 파일 업로드 진행 표시 줄

6712 단어 html5ajax파일 업로드진도 표
jquery 플러그 인 을 사용 하여 비동기 파일 을 업로드 하려 고 했 는데 uploadfy 와 같은 추가 지원 이 필요 하고 iframe 으로 비동기 업로드 체 제 를 모방 하 는 사람 도 있어 어색 합 니 다.프로젝트 는 저 버 전 브 라 우 저 를 고려 하지 않 기 때문에 html 5 로 구현 하기 로 했 습 니 다.다음은 간단 한 demo 일 뿐 구체 적 인 스타일 은 스스로 해 야 합 니 다.
배경 은 strut 2 를 기반 으로 파일 처 리 를 하고 구체 적 으로 프로젝트 에 따라 정 합 니 다.다만 파일 크기 의 제한 을 설정 하 는 것 에 주의해 야 합 니 다.  이 설정 은 구체 적 인 상황 에 따라 설정 되 며,이 값 을 초과 하면 404 를 보고 합 니 다.
우선 페이지 를 업로드 하 는 것 이 간단 합 니 다.파일 에 있 는 사람 이라는 인 자 를 추가 하 였 습 니 다.
upload.jsp

<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> 
<%
String path = request.getContextPath(); 
%>
<!DOCTYPE html>
<html>
<head>
 <title>  XMLHttpRequest    </title>
 <script type="text/javascript">
 var xhr = new XMLHttpRequest();
 
 //        
 function fileSelected() {
  //HTML5  API  
  var file = document.getElementById('fileName').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("name", document.getElementById('name').value);
  fd.append("fileName", document.getElementById('fileName').files[0]);

  //    
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);
  xhr.addEventListener("abort", uploadCanceled, false);
  //            
  xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload");
  xhr.send(fd);
  }
 //    
 function cancleUploadFile(){
 xhr.abort();
 }
 
 //    
 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) {
  //             
  alert(evt.target.responseText);
 }
 
 //    
 function uploadFailed(evt) {
  alert("    ");
 }
 //    
 function uploadCanceled(evt) {
  alert("        .");
 }
 </script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
  <label for="fileToUpload">    </label>
<input type="file" name="fileName" id="fileName" onchange="fileSelected();"/>
 </div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
   ：<input type="text" name="name" id="name"/>
<input type="button" onclick="uploadFile()" value="  " />
<input type="button" onclick="cancleUploadFile()" value="  " />
 </div>
<div id="progressNumber"></div>
</form>

</body>
</html>
fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
이 두 문장 은 데 이 터 를 폼 에 연결 하 는 것 이다.html 5 는 다 중 파일 업 로드 를 지원 하기 때문에
document.getElementById('fileName').files
돌아 온 것 은 배열 이다.여기 파일 이 하나 밖 에 없어 서 0 을 표시 하 는 요 소 를 가 져 옵 니 다.
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
여기 서 진도,업로드,오류,중 단 된 사건 을 연결 하여 상호작용 을 제공 합 니 다.파일 진도 표 시 는 progress 리 셋 에서 표 시 됩 니 다.
그리고 배경 코드 와 action 설정,UploadifyTestAction.자바 를 붙 입 니 다.

package com.bjhit.eranges.actions.test;

import java.io.File;

import com.opensymphony.xwork2.ActionSupport;

public class UploadifyTestAction extends ActionSupport {
 private static final long serialVersionUID = 837481714629791752L;
 private File fileName;
 private String name;
 private String responseInfo;

 public String doUpload() throws Exception {
 System.out.println(name);
 File myFile = fileName;
 System.out.println(myFile.getName());
 responseInfo = "    !";
 return "doUpload";
 }

 public String getName() {
 return name;
 }

 public void setName(String name) {
 this.name = name;
 }

 public File getFileName() {
 return fileName;
 }

 public void setFileName(File fileName) {
 this.fileName = fileName;
 }

 public String getResponseInfo() {
 return responseInfo;
 }

 public void setResponseInfo(String responseInfo) {
 this.responseInfo = responseInfo;
 }
}
액 션 설정

<!--        -->
<action name="uploadifyTest_*" class="com.bjhit.eranges.actions.test.UploadifyTestAction" method="{1}">
 <result name="doUpload" type="json">
 <param name="includeProperties">responseInfo</param>
 <param name="excludeNullProperties">true</param>
 </result>
</action>
이렇게 기본 적 인 업로드 기능 이 실현 되 었 다.
읽 어 주 셔 서 감사합니다.
Spring Boot 프로젝트 의 자동 실행 방법 을 시작 하 는 두 가지 실현 방식
SpringAOP 설정 주입 의 실현 절차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage