HTML5 Ajax 파일 업로드 진행률 표시줄을 표시하는 방법-HTML 튜토리얼-php.cn

HTML5 Ajax 파일 업로드 진행률 표시줄을 표시하는 방법

韦小宝

풀어 주다： 2018-01-10 09:58:02

원래의

2670명이 탐색했습니다.

이 글에서는 HTML5 Ajax파일 업로드 진행 표시줄이 표시되는 방식을 주로 소개합니다. 이는 기본 HTML5 구현을 기반으로 하며 진행 상황을 사용자 정의할 수 있고 제어가 유연합니다. 업로드 진행률 표시줄 친구 여러분, 이것을 참고하세요

원래는 uploadfy와 같은 비동기 파일 업로드를 위해 jquery 플러그인을 사용할 계획이었지만, 비동기 업로드 메커니즘을 모방하기 위해 iframe을 사용하는 사람들도 있는데 어색하게 느껴집니다. . 프로젝트에서는 하위 버전의 브라우저를 고려하지 않기 때문에 HTML5를 사용하여 구현하기로 결정했습니다. 다음은 간단한 데모이므로 특정 스타일을 직접 만들어야 합니다.
배경은 프로젝트에 따라 달라지는 파일 처리를 위한 strut2를 기반으로 합니다. 파일 크기 제한 설정에 주의하세요. 이 구성은 특정 상황에 따라 설정됩니다. 이 값을 초과하면 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(&#39;fileName&#39;).files[0];
  if (file) {
   var fileSize = 0;
   if (file.size > 1024 * 1024)
   fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + &#39;MB&#39;;
   else
   fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + &#39;KB&#39;;

   document.getElementById(&#39;fileName&#39;).innerHTML = &#39;Name: &#39; + file.name;
   document.getElementById(&#39;fileSize&#39;).innerHTML = &#39;Size: &#39; + fileSize;
   document.getElementById(&#39;fileType&#39;).innerHTML = &#39;Type: &#39; + file.type;
  }
  }
 
 //上传文件
 function uploadFile() {
  var fd = new FormData();
  //关联表单数据,可以是自定义参数
  fd.append("name", document.getElementById(&#39;name&#39;).value);
  fd.append("fileName", document.getElementById(&#39;fileName&#39;).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(&#39;progressNumber&#39;).innerHTML = percentComplete.toString() + &#39;%&#39;;
  }
  else {
   document.getElementById(&#39;progressNumber&#39;).innerHTML = &#39;unable to compute&#39;;
  }
 }

 //上传成功响应
 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">
<p class="row">
  <label for="fileToUpload">选择文件</label>
<input type="file" name="fileName" id="fileName" onchange="fileSelected();"/>
 </p>
<p id="fileName"></p>
<p id="fileSize"></p>
<p id="fileType"></p>
<p class="row">
上传者：<input type="text" name="name" id="name"/>
<input type="button" onclick="uploadFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
 </p>
<p id="progressNumber"></p>
</form>

</body>
</html>

로그인 후 복사

fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0 ]);
이 두 문장은 data를 양식에 바인딩합니다. html5는 여러 파일 업로드를 지원하므로
document.getElementById('fileName').files
는 배열을 반환합니다. 여기에는 파일이 하나만 있으므로 인덱스가 0인 요소를 제거합니다.

xhr.upload.addEventListener("progress", uploadProgress, false)

xhr.addEventListener("load", uploadComplete, false);

false);

xhr.addEventListener ("abort", uploadCanceled, false);
진행 상황, 업로드, 오류 및 중단 이벤트를 여기에 바인딩하여 상호 작용을 제공합니다. 진행률 콜백에 파일 진행률이 표시됩니다.
그런 다음 배경 코드와 동작 구성을 붙여넣고 UploadifyTestAction.java

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 구성

<!-- 文件上传例子 -->
<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>

로그인 후 복사

이 글의 내용은 이것이 전부입니다. 모두가 학습하는 데 도움이 되기를 바랍니다! !