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中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci HTML5+Ajax文件上传进度条显示（图文详解）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1209
24
Bagaimana untuk mengalih keluar berita dan kandungan sohor kini daripada Carian Windows 11
Oct 16, 2023 pm 08:13 PM
Apabila anda mengklik medan carian dalam Windows 11, antara muka carian secara automatik mengembang. Ia memaparkan senarai program terbaru di sebelah kiri dan kandungan web di sebelah kanan. Microsoft memaparkan berita dan kandungan trend di sana. Semakan hari ini mempromosikan ciri penjanaan imej DALL-E3 baharu Bing, tawaran "Naga Sembang dengan Bing", maklumat lanjut tentang naga, berita popular daripada bahagian Web, cadangan permainan dan bahagian Carian Arah Aliran. Keseluruhan senarai item adalah bebas daripada aktiviti anda pada komputer anda. Walaupun sesetengah pengguna mungkin menghargai keupayaan untuk melihat berita, semua ini tersedia dengan banyaknya di tempat lain. Orang lain boleh secara langsung atau tidak langsung mengklasifikasikannya sebagai promosi atau pengiklanan. Microsoft menggunakan antara muka untuk mempromosikan kandungannya sendiri,
Mod siap sedia iOS 17 menukarkan iPhone yang sedang mengecas menjadi hab rumah
Jun 06, 2023 am 08:20 AM
Dalam iOS 17 Apple memperkenalkan Mod Siap Sedia, pengalaman paparan baharu yang direka untuk mengecas iPhone dalam orientasi mendatar. Dalam kedudukan ini, iPhone dapat memaparkan satu siri widget skrin penuh, mengubahnya menjadi hab rumah yang berguna. Mod siap sedia diaktifkan secara automatik pada iPhone yang menjalankan iOS 17 yang diletakkan secara mendatar pada pengecas. Anda boleh melihat maklumat seperti masa, cuaca, kalendar, kawalan muzik, foto dan banyak lagi. Anda boleh leret ke kiri atau kanan melalui pilihan siap sedia yang tersedia dan kemudian tekan lama atau leret ke atas/bawah untuk menyesuaikan. Sebagai contoh, anda boleh memilih daripada paparan analog, paparan digital, fon gelembung dan paparan siang, di mana warna latar belakang berubah berdasarkan masa seiring dengan berlalunya masa. Terdapat beberapa pilihan
Panduan Pengguna Windows 11: Bagaimana untuk melumpuhkan pop timbul iklan
Sep 22, 2023 pm 07:21 PM
Sistem pengendalian Windows 11 Microsoft mungkin memaparkan cadangan secara berkala sebagai pop timbul pada komputer anda menggunakan sistem pemberitahuan. Sistem cadangan, yang pada asalnya direka bentuk untuk menyediakan petua dan cadangan kepada pengguna untuk menambah baik aliran kerja Windows 11 mereka, hampir sepenuhnya berubah menjadi sistem pengiklanan untuk mempromosikan perkhidmatan dan produk Microsoft. Pop timbul cadangan mungkin mengiklankan langganan Microsoft 365 kepada pengguna, mencadangkan memautkan telefon Android ke peranti atau menyediakan penyelesaian sandaran. Jika pop timbul ini mengganggu anda, anda boleh mengubahsuai sistem anda untuk melumpuhkannya sepenuhnya. Panduan berikut menyediakan cadangan untuk melumpuhkan pop timbul pada peranti yang menjalankan sistem pengendalian Windows 11 Microsoft.
Sebab dan penyelesaian untuk susun atur desktop dikunci
Feb 19, 2024 pm 06:08 PM
Apakah yang berlaku apabila susun atur desktop dikunci apabila menggunakan komputer, kadangkala kita mungkin menghadapi situasi di mana reka letak desktop dikunci. Masalah ini bermakna kita tidak boleh bebas melaraskan kedudukan ikon desktop atau menukar latar belakang desktop. Jadi, apa sebenarnya yang berlaku apabila ia mengatakan bahawa susun atur desktop dikunci? 1. Fahami reka letak desktop dan fungsi penguncian Pertama, kita perlu memahami dua konsep susun atur desktop dan penguncian desktop. Reka letak desktop merujuk kepada susunan pelbagai elemen pada desktop, termasuk pintasan, folder, widget, dsb. kita boleh bebas
Cara menghidupkan kapsyen langsung dalam Windows 11
Jun 27, 2023 am 08:33 AM
Cara menghidupkan sari kata langsung dalam Windows 11 1. Tekan Ctrl+L pada papan kekunci anda 2. Klik Setuju 3. Pop timbul akan muncul yang menyatakan Sedia untuk menambah sari kata dalam bahasa Inggeris (AS) (bergantung pada bahasa pilihan anda) 4. Selain itu, anda boleh menapis kata-kata kotor dengan mengklik butang gear? Keutamaan? Menapis Artikel Berkaitan Sumpah Cara Membetulkan Kod Ralat Pengaktifan 0xc004f069 dalam Pelayan Windows Proses pengaktifan pada Windows kadangkala mengambil giliran secara tiba-tiba untuk memaparkan mesej ralat yang mengandungi kod ralat 0xc004f069 ini. Walaupun proses pengaktifan adalah dalam talian, beberapa sistem lama yang menjalankan Windows Server mungkin mengalami masalah ini. Lulus semakan awal ini dan jika semakan ini tidak
Apakah maksud h5?
Aug 02, 2023 pm 01:52 PM
H5 merujuk kepada HTML5, versi terkini HTML H5 ialah bahasa penanda yang berkuasa yang menyediakan pembangun dengan lebih banyak pilihan dan ruang kreatif Kemunculannya menggalakkan pembangunan teknologi Web dan menjadikan interaksi dan kesan halaman web lebih Cemerlang, sebagai teknologi H5. secara beransur-ansur matang dan menjadi popular, saya percaya ia akan memainkan peranan yang semakin penting dalam dunia Internet.
Cara membuat sambungan desktop jauh memaparkan bar tugas pihak lain
Jan 03, 2024 pm 12:49 PM
Terdapat ramai pengguna yang menggunakan Sambungan Desktop Jauh Ramai pengguna akan menghadapi beberapa masalah kecil apabila menggunakannya, seperti bar tugas pihak lain yang tidak dipaparkan penyelesaian di bawah. Cara untuk memaparkan bar tugas pihak lain semasa Sambungan Desktop Jauh: 1. Pertama, klik "Tetapan". 2. Kemudian buka "Peribadikan". 3. Kemudian pilih "Taskbar" di sebelah kiri 4. Matikan pilihan Hide Taskbar dalam gambar.
Bagaimana untuk menyemak direktori semasa di Linux?
Feb 23, 2024 pm 05:54 PM
Dalam sistem Linux, anda boleh menggunakan perintah pwd untuk memaparkan laluan semasa. Perintah pwd ialah singkatan dari PrintWorkingDirectory dan digunakan untuk memaparkan laluan direktori kerja semasa. Masukkan arahan berikut dalam terminal untuk memaparkan laluan semasa: pwd Selepas melaksanakan arahan ini, terminal akan memaparkan laluan penuh direktori kerja semasa, seperti: /home/user/Documents. Selain itu, anda juga boleh menggunakan beberapa pilihan lain untuk meningkatkan kefungsian perintah pwd Contohnya, pilihan -P boleh dipaparkan
