HTML5+Ajax文件上传进度条显示（图文详解）
这次给大家带来HTML5+Ajax文件上传进度条显示（图文详解），HTML5+Ajax文件上传进度条显示的注意事项有哪些，下面就是实战案例，一起来看一下。
原本打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简单的demo，具体样式需要自己去做。
后台基于strut2进行文件处理，具体因项目而定。只是要注意设置文件大小的限制。
首先是上传页面,比较简单，附带了文件上者这个参数。
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]);这两句是把数据绑定到表单。因为html5支持多文件上传，所以
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.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中文网其它相关文章！
推荐阅读：
以上是HTML5+Ajax文件上传进度条显示（图文详解）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
删除 Windows 11 搜索中的新闻和趋势内容的方法
Oct 16, 2023 pm 08:13 PM
当您单击Windows11中的搜索字段时，搜索界面会自动展开。它在左侧显示最近程序的列表，在右侧显示Web内容。Microsoft在那里显示新闻和趋势内容。今天的支票宣传了必应新的DALL-E3图像生成功能、“与必应聊天龙”的提议、有关龙的更多信息、来自网络部分的热门新闻、游戏建议和趋势搜索部分。整个项目列表与您在计算机上的活动无关。虽然一些用户可能会喜欢查看新闻的能力，但所有这些都可以在其他地方大量获得。其他人可能会直接或间接将其归类为促销甚至广告。Microsoft使用界面来推广自己的内容，
iOS 17 的待机模式将正在充电的 iPhone 变成家庭集线器
Jun 06, 2023 am 08:20 AM
iOS17中的Apple正在引入待机模式，这是一种新的显示体验，专为水平方向的充电iPhone而设计。处于这个位置的iPhone能够显示一系列全屏小部件，将其变成一个有用的家庭中心。待机模式会在水平放置在充电器上运行iOS17的iPhone上自动激活。您可以查看时间、天气、日历、音乐控制、照片等信息。您可以通过可用的待机选项向左或向右滑动，然后长按或向上/向下滑动以进行自定义。例如，随着时间的流逝，您可以从模拟视图、数字视图、气泡字体和日光视图中进行选择，其中背景颜色会根据时间而变化。有一些选项
Windows 11用户指南：如何禁用广告弹窗
Sep 22, 2023 pm 07:21 PM
Microsoft的Windows11操作系统可能会使用通知系统的计算机上定期将建议显示为弹出窗口。建议系统最初旨在为用户提供有关改进Windows11工作流程的提示和建议，现已几乎完全转变为推广Microsoft服务和产品的广告系统。建议的弹出窗口可能会向用户宣传Microsoft365订阅，建议将Android手机链接到设备，或设置备份解决方案。如果这些弹出窗口惹恼了您，您可以调整系统以完全禁用它们。以下指南提供了有关在运行Microosft的Windows11操作系统的设备上禁用弹出建议的
桌面布局已锁定的原因及解决方法
Feb 19, 2024 pm 06:08 PM
显示桌面布局已锁定是怎么回事在使用计算机的过程中，有时我们可能会遇到显示桌面布局已锁定的情况。这个问题意味着我们无法自由地调整桌面图标的位置或改变桌面背景等操作。那么，显示桌面布局已锁定到底是怎么回事呢？一、理解桌面布局和锁定功能首先，我们需要了解桌面布局和桌面锁定这两个概念。桌面布局是指桌面上各个元素的排列方式，包括快捷方式、文件夹和小部件等。我们可以自由
如何在 Windows 11 中立即打开实时字幕
Jun 27, 2023 am 08:33 AM
如何在Windows11中立即打开实时字幕1.在键盘上预赢+按Ctrl+L2.点击同意3.将显示一个弹出窗口，显示准备以英语（美国）添加字幕（取决于您的首选语言）4.此外，您还可以通过单击齿轮按钮来过滤亵渎？偏好？过滤脏话相关文章如何修复Windows服务器中的激活错误代码0xc004f069Windows上的激活过程有时会突然转向显示包含此错误代码0xc004f069的错误消息。虽然激活过程已经联机，但一些运行WindowsServer的旧系统可能会遇到此问题。通过这些初步检查，如果这些检查不
h5是指什么
Aug 02, 2023 pm 01:52 PM
H5是指HTML5，是HTML的最新版本，H5是一个功能强大的标记语言，为开发者提供了更多的选择和创造空间，它的出现推动了Web技术的发展，使得网页的交互和效果更加出色，随着H5技术的逐渐成熟和普及，相信它将会在互联网的世界中发挥越来越重要的作用。
如何让远程桌面连接显示对方的任务栏
Jan 03, 2024 pm 12:49 PM
远程桌面连接使用的用户非常多，很多用户在使用的时候都会遇到些小问题，比如没有显示对方的任务栏，其实很可能是对方的设置问题，下面就来看看解决方法吧。远程桌面连接怎么显示对方的任务栏：1、首先点击“设置”。2、然后再打开“个性化”。3、随后选择左侧的“任务栏”4、将图中隐藏任务栏选项关闭即可。
Linux 中如何查看当前目录？
Feb 23, 2024 pm 05:54 PM
在Linux系统中，要显示当前路径可以使用pwd命令。pwd命令是PrintWorkingDirectory的缩写，用于显示当前工作目录的路径。在终端中输入以下命令即可显示当前路径：pwd执行该命令后，终端会显示当前工作目录的完整路径，如：/home/user/Documents。另外，还可以使用一些其他选项来增强pwd命令的功能，例如-P选项可以显示出
