JavaScript を使用して画像をアップロードする
ユーザーは、本文セクションにファイル タイプの入力フィールドを作成することにより、HTML ファイルから開始して画像をアップロードできます。 この記事では、JavaScript を使用して画像をアップロードする方法の例を示します。
JavaScript アップロード画像
display_image の id を持つ div タグを使用して、幅と高さが定義された出力としてアップロードされる画像を表示します。
構文：
<input type ="file" id ="image_input" accept ="image/jpeg, image/png, image/jpg">
<div id="display_image"></div>
アップロードされた画像が完全に収まるようにするには、画像のプロパティを適切な値で CSS ファイルに追加する必要があります。 ここで、境界線は追加する必要のある必須のプロパティではありませんが、画像が表示される場所をユーザーが簡単に確認できるようにします。
#display-image{
width: 500px;
height: 325px;
border: 2px solid black;
background-position: center;
background-size: cover;
}
次に、JavaScript ファイルを作成して、入力フィールドにアクセスし、ユーザーが要素の値を変更したときに実行されるイベントである "change" イベント リスナーをアタッチします。 このリスナーの下で、ユーザーは FileReader オブジェクトへのアクセスを取得する必要があります。これにより、Web アプリケーションはユーザーのローカル マシンに保存されているファイルまたは生データ バッファーの内容を読み取り、"load" イベント リスナーをアタッチできるようになります。 画像、CSS ファイル、JavaScript ファイルなどのすべての依存ソースを含め、ページ全体が完全に読み込まれます。
簡単に言えば、アップロードされた画像は表示可能な形式に変換されます。 アップロードされた画像は uploadImage 変数に保存され、この変数は CSS で backgroundImage プロパティを初期化するために使用されます。
const image_input = document.querySelector('#image_input');
image_input.addEventListener('change', function() {
const file_reader = new FileReader();
file_reader.addEventListener('load', () => {
const uploaded_image = file_reader.result;
document.querySelector('#display_image').style.backgroundImage =
`url(${uploaded_image})`;
});
file_reader.readAsDataURL(this.files[0]);
});
完全なソース コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Upload Image </title>
<style>
#display_image{
width: 500px;
height: 325px;
border: 2px solid black;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<input type="file" id="image_input" accept="image/jpeg, image/png, image/jpg">
<div id="display_image"></div>
<script>
const image_input = document.querySelector("#image_input");
image_input.addEventListener("change", function() {
const file_reader = new FileReader();
file_reader.addEventListener("load", () => {
const uploaded_image = file_reader.result;
document.querySelector("#display_image").style.backgroundImage = `url(${uploaded_image})`;
});
file_reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
出力：
幅または高さが定義されていない JavaScript アップロード画像
JavaScript で元のサイズの幅や高さを定義せずに画像をアップロードすることもできます。 以下の手順に従ってください。
-
HTML ファイルを作成することから始め、アップロードされた画像で呼び出す onchange 関数
filevalidation()を使用して、id をファイルとして割り当てる入力タイプ ファイルを設定します。 -
次に、
filevaildation()関数内でドキュメント メソッド.getElementById()を使用して、var image = document.getElementById(‘uploaded image’);を介して ID で要素を選択します。 -
uploaded_image.src=URL.createObjectURL(event.target.files[0]);. -
ユーザーによってファイルが選択されているかどうかをチェックするために
if(selected_file.files.length>0)としてループし、選択されたファイルのサイズを取得するためにconst file_size=selected_file.files.item(i).size;に使える。 -
次に、ファイルサイズがバイトに変換されます。
Math.round((file_size/1024));の使い方 関数は任意の単位に変換できます。
完全なソース コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Upload Image</title>
</head>
<body>
<input type="file" id="file" onchange="FileValidation(event)" >
<br><br><br>
<h2>Uploaded Image by the User</h2>
<img id="uploaded image">
</body>
<script>
FileValidation = (event) => {
var uploaded_image = document.getElementById('uploaded image');
uploaded_image.src = URL.createObjectURL(event.target.files[0]);
const selected_file = document.getElementById("file");
if (selected_file.files.length > 0) {
for (const i = 0; i <= selected_file.files.length - 1; i++) {
const file_size = selected_file.files.item(i).size;
const file = Math.round((file_size / 1024));
}
}
}
</script>
</html>
出力：
上記のコードから、任意のファイル タイプをユーザーが選択してアップロードできますが、表示することはできません。 さらに実装すると、要件ごとに上記のプログラムにさらにコーディングを追加することで、複数の画像のアップロードを実行できます。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.