HTML5 の新機能を利用して画像ファイルの非同期アップロードを実現する_html5 チュートリアル スキル

HTML5 の新機能を使用してファイルを非同期にアップロードするのは非常に簡単で便利です。この記事では主に JS 部分と HTML 構造について説明します。以下のコードはサードパーティのライブラリを使用していません。参照がある場合は、表示されていない一部のコード スニペットに注意してください。私の側のエフェクトプレビュー:

1. ファイルが選択されていない 2. ファイルが選択されている


HTML コード部分:

アイデア: 以下のコードでは、css の z-index 属性を使用して、id=btnSelect 要素の下の input="file” タグを非表示にします。a タグのクリックをトリガーすると、ファイル選択ボックスがポップアップします。以下のマスクレイヤーは、ユーザーが確認ボタンを繰り返しクリックするのを防ぐためのポップアップレイヤーです。

クリックしてアップロードする写真を選択します
アップロードを確認

写真はアップロード中です。 ..

JS イメージ ファイル検証部分:

検証部分は次のとおりです: サイズ、選択されているかどうか、ファイル タイプには 3 つの部分があります。最初の createObject メソッドは、ローカル イメージ ファイルのプレビュー パスを作成します。を確認し、空であるかどうか、ファイルの種類、ファイルのサイズを確認します。条件が満たされない場合は、

false が返されます。上記の 3 つの条件が満たされた後、画像プレビューが生成されます。 dom に img 要素を追加し、createObjectURL() メソッドを使用してプレビュー パスを取得します:

コードをコピーします

コードは次のとおりです:


//データの URL アドレスを取得します
function createObjectURL(blob) {
if (window.URL) {
return window.URL.createObjectURL(blob);

} else if (window.webkitURL) {

return window.webkitURL.createObjectURL(blob); {
return null;

}

} //ファイル検出function checkFile() { //ファイルを取得var file = $$( "uploadFile") .files[0];

//ファイルが空かどうかを判定

if (file === null || file === unknown) {

alert("アップロードしたいファイルを選択してください書類！ ");

$$("btnSelect").innerHTML = "アップロードする写真をクリックして選択します";
return false;
}
//ファイルの種類を検出
if(file .type.indexOf('image') === -1) {
alert("画像ファイルを選択してください!");
return false;
}
//ファイルサイズを計算します
var size = Math.floor(file.size/1024);
if (size > 5000) {
alert("アップロードされたファイルは 5M を超えてはなりません!");
}
//プレビュー画像を追加
$$("btnSelect").innerHTML = "";
};



JS Ajax リクエスト部分:

説明: 最初のリスナーは、検証条件が満たされた後、プレビューされます。 2 番目のイベント リスナーは、btnSelect がクリックされたときのポップアップ ウィンドウの応答をリッスンし、Ajax リクエストの送信を開始する確認のアップロード ボタンのイベントを監視します。 XMLHttpRequest オブジェクト。addEventListener() メソッドを含むコードは投稿していません。コードは次のとおりです。

コードをコピー
//画像 URL アドレスの変更をリッスン
addEventListener($$("uploadFile"), "change", function() {
checkFile();
} );
//ファイル選択ボタンのクリックをリッスンします
addEventListener($$("btnSelect"), "click", function() {
//ファイル選択ボックスをポップアップします
$$(" UploadFile").click();
});
//アップロード確認ボタンのクリック イベントをリッスンします
addEventListener($$("btnconfirm"), "click", function(e) {
if (checkFile()) {
try {
//アップロード操作を実行します var xhr = createXHR();
$$("maskLayer").style.display = "ブロック";
xhr.open("post","/uploadPhoto.action", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); .onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (flag == "成功") {
alert("画像");
} else {
alert("画像は正常にアップロードされました!");
};
$$("maskLayer").style.display = "none";
};
} ;
//フォームデータ
var fd = new FormData();
fd.append("myPhoto", $$("uploadFile").files[0] );
//送信
xhr.send(fd);
} catch (e) {
}
}
} );

上記はすべて主要なコード部分です。ご不明な点がございましたら、お気軽にお問い合わせください。