HTML5+Ajax 파일 업로드 진행률 표시줄 표시(자세한 그래픽 및 텍스트 설명)-JS 튜토리얼-php.cn

HTML5+Ajax 파일 업로드 진행률 표시줄 표시(자세한 그래픽 및 텍스트 설명)

php中世界最好的语言

풀어 주다： 2018-04-04 16:33:49

원래의

2119명이 탐색했습니다.

이번에는 HTML5+Ajax파일 업로드 진행 표시줄표시(자세한 그림 및 텍스트)를 가져왔습니다. HTML5+Ajax 파일 업로드 진행 표시줄에 표시되는 주의사항은 무엇이며, 다음은 실제 사례입니다. 보세요.

원래는 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('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">
<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) );

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>

로그인 후 복사

붙여넣으세요. 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트!