HTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）-jsチュートリアル-php.cn

HTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）

php中世界最好的语言

リリース： 2018-04-04 16:33:49

オリジナル

2176 人が閲覧しました

今回は、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データを読み取る方法

フォームJSON変換を実装するためにAJAXを構築する方法

以上がHTML5+Ajaxファイルアップロードプログレスバー表示（詳細なグラフィックとテキスト説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。