html5でファイルアップロード機能を実装する方法-jsチュートリアル-php.cn

html5でファイルアップロード機能を実装する方法

清浅

リリース： 2018-11-16 12:42:06

オリジナル

11107 人が閲覧しました

この記事では、HTML5 を使用してファイルアップロード機能を実装する事例を紹介します。これには一定の参考価値があり、

HTML5 の新しい API メソッドのいくつかに役立つことを願っています。機能がよりシンプルになり、よりダイナミックな効果が得られます。次に、ファイルアップロード機能の実装について詳しく紹介します。

実装事例で使用する知識のポイント

(1) Multiple は、HTML5 の新しい属性です。主に、入力フィールドに複数の値を選択できることを規定しています。一般的に、メールとファイルで共有されます。

(2) querySelector() メソッドは主に、指定されたセレクターに一致するドキュメント内の最初の要素を返すために使用されます。すべての要素を返したい場合は、querySelectorAll() を使用できます。代わりにメソッドを使用します。

(3) FileReader オブジェクトを使用すると、アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、コンピューターに保存されているファイルの内容を非同期的に読み取ることができます。 File オブジェクトは、要素からファイルを選択した後に返される 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(&#39;.file&#39;);/*获取到了文件表单元素*/
/*选择文件后触发*/
file.onchange = function () {
/*初始化了一个文件读取对象*/
var reader = new FileReader();
/*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
reader.readAsDataURL(this.files[0]);
/* 加载 */
reader.onload = function () {
    /*读取完成显示图片*/
    console.log(this.result);
document.querySelector(&#39;#img&#39;).src = this.result;

}
}
</script>
</body>
</html>

ログイン後にコピー

エフェクト表示

未選択前

Image 6.jpg 選択後