ホームページ > 記事 > ウェブフロントエンド > HTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）
HTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）
- php中世界最好的语言オリジナル
- 2018-04-04 16:33:492067ブラウズ
今回は、HTML5+Ajaxファイルアップロードプログレスバー表示（詳細な画像とテキスト）、HTML5+Ajaxファイルアップロードプログレスバーに表示される注意事項とは何ですか、以下は実際的なケースです。見てください。
当初は、uploadfy などの非同期ファイルアップロードに jquery プラグインを使用する予定でしたが、追加のサポートが必要です。また、非同期アップロードメカニズムを模倣するために iframe を使用する人もいます。このプロジェクトでは下位バージョンのブラウザーは考慮されていないため、実装には HTML5 を使用することが決定されました。以下は簡単なデモです。特定のスタイルは自分で作成する必要があります。
背景はファイル処理用の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 ]);これら 2 つの文は、データをフォームにバインドします。 html5 は複数のファイルのアップロードをサポートしているため、
document.getElementById('fileName').files は配列を返します。ここにはファイルが 1 つしかないため、インデックス 0 の要素を削除します。
xhr.upload.addEventListener("進行状況"、uploadProgress、false);
xhr.addEventListener("load"、uploadComplete、false) );
xhr.addEventListener("abort"、uploadCanceled) 、 false);進行状況、アップロード、エラー、中断イベントをここにバインドして、何らかの対話を提供します。ファイルの進行状況は進行状況コールバックに表示されます。 次に、バックグラウンド コードとアクション構成を貼り付けます。 PHPの中国語サイトです！
推奨読書:
ajaxでJsonデータを読み取る方法
以上がHTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。