ホームページ > 記事 > ウェブフロントエンド > html5でファイルアップロード機能を実装する方法
html5でファイルアップロード機能を実装する方法
- 清浅オリジナル
- 2018-11-16 12:42:0611084ブラウズ
この記事では、HTML5 を使用してファイル アップロード機能を実装する事例を紹介します。これには一定の参考価値があり、
HTML5 の新しい API メソッドのいくつかに役立つことを願っています。機能がよりシンプルになり、よりダイナミックな効果が得られます。 次に、ファイルアップロード機能の実装について詳しく紹介します。
実装事例で使用する知識のポイント
(1) Multiple は、HTML5 の新しい属性です。主に、入力フィールドに複数の値を選択できることを規定しています。一般的に、メールとファイルで共有されます。
(2) querySelector() メソッドは主に、指定されたセレクターに一致するドキュメント内の最初の要素を返すために使用されます。すべての要素を返したい場合は、querySelectorAll() を使用できます。代わりにメソッドを使用します。
(3) FileReader オブジェクトを使用すると、アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、コンピューターに保存されているファイルの内容を非同期的に読み取ることができます。 File オブジェクトは、d5fd7aea971a85678ba271703566ebfd 要素からファイルを選択した後に返される FileList オブジェクトにすることができます。
(4) readAsDataURL: 読み取った画像ファイルを Web ページに直接表示して、プレビュー効果を実現します。
##コード表示<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件读取</title>
<style>
.box{
width:500px;
height:500px;
border: 1px solid #ccc;
margin:300px auto;
position: relative;
background-color:rgb(167,239,251);
}
.file{
position: absolute;
bottom:0;
left:0;
}
#img{
position: absolute;
left:100px;
bottom:30px;
}
</style>
</head>
<body>
<div>
<input type="file" multiple>
<img src="" alt="" id="img">
</div>
<script>
var file = document.querySelector('.file');/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange = function () {
/*初始化了一个文件读取对象*/
var reader = new FileReader();
/*读取文件数据 this.files[0] 文件表单元素选择的第一个文件 */
reader.readAsDataURL(this.files[0]);
/* 加载 */
reader.onload = function () {
/*读取完成显示图片*/
console.log(this.result);
document.querySelector('#img').src = this.result;
}
}
</script>
</body>
</html>
未選択前
選択後
#概要: 以上がこの記事の内容であり、HTML5 を使用してファイルをアップロードする方法を学習するのに役立つことを願っています。
以上がhtml5でファイルアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。