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

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

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

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


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

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

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

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

$$("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) {
}
}
} );