ネイティブ JavaScript は、非同期の複数ファイルの Upload_JavaScript スキルを実装します。

これは前の記事の修正版です。バックグラウンド コードが変更されていない限り、引き続き使用できますが、スクリプトでは jQuery が使用されなくなり、ネイティブ JavaScript コードに置き換えられるため、主に JS コードを確認します。

最初に技術パラメータを紹介します:

ページテクノロジー: HTML5

バックエンドテクノロジー: サーブレット 3.0

サーバー: Tomcat 7.0

スクリプト: JavaScript

HTML5 ファイルコンポーネントの新しい属性

accept : この属性をファイルコンポーネントに追加すると、アップロードされるファイルの種類を直接制御でき、非常に便利です。

multiple: 複数のファイル選択を許可するかどうか
HTML5 ページのコードが変更されました

<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
　　<div id="son"></div>
</div>

accept の値は、IANA MIME タイプ (標準 MIME タイプの完全なリスト) にあります。DW 開発を使用している場合は、ソフトウェア自体にプロンプ​​トが表示されます。

複数のファイルを選択した場合、JS を使用してループで印刷し、ファイルの名前、タイプ、サイズを確認できます。デモ コードを参照してください。

function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
  " , 文件类型："+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}

複数のファイルをループできるようになったので、複数のファイルをアップロードしてみてください。

1. まず XMLHttpRequest オブジェクト

を作成します。

//これはグローバル変数です。サンプルなのでブラウザの種類を判断するものではありません。IEの下位バージョンでこのように書くと問題が発生します
。 var xhr = 新しい XMLHttpRequest()
2. 前回の記事では進捗イベント(Progress)を紹介しましたが、今回はprogressとerrorの2つのイベントが実装されます

。

error: リクエストでエラーが発生したときにトリガーされます。

アップロード中のエラーによるアップロード失敗に対応: UploadFailed()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
　　progress：在接收相应期间持续不断触发。

　　　　　　对应上传进度方法：onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已经上传大小情况 
 var tot = evt.total;       //附件总大小 
 var per = Math.floor(100*loaded/tot);   //已经上传的百分比 
　 $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

最後のステップはアップロード メソッドです。通常に使用するには、上記の HTML コードのアップロード メソッドも、uploadFile() メソッドに変更する必要があることに注意してください。

 //上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
　　 xhr.send(formData);
} 

追伸: 結局のところ、これは基本的な機能のデモ例にすぎません。企業のプラットフォームで使用する場合は注意してください。

この記事を組み合わせて学習できます: HTML5 に基づいて Ajax ファイルアップロードの進行状況バーを実装する方法 (jquery バージョン)

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。