Heim > Artikel > Web-Frontend > So implementieren Sie die Datei-Upload-Funktion in HTML5
So implementieren Sie die Datei-Upload-Funktion in HTML5
- 清浅Original
- 2018-11-16 12:42:0611042Durchsuche
Dieser Artikel wird einen Fall mit HTML5 zur Implementierung der Datei-Upload-Funktion vorstellen. Er hat einen gewissen Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.
Einige der neuen API-Methoden in HTML5 ermöglichen Wir möchten einige implementieren Die Funktion ist einfacher und es können dynamischere Effekte erzielt werden. Als nächstes wird die Implementierung der Datei-Upload-Funktion im Detail vorgestellt
Wissenspunkte, die bei der Fallimplementierung verwendet werden
(1) Multiple ist ein neues Attribut in HTML5. Es wird hauptsächlich zum Hochladen von Dateien mit mehreren Werten verwendet. Es legt fest, dass mehrere Werte für das Eingabefeld ausgewählt werden können Eingabeattribut
(2) Die Methode querySelector() wird hauptsächlich verwendet, um das erste Element im Dokument zurückzugeben, das mit dem angegebenen Selektor übereinstimmt. Wenn Sie alle Elemente zurückgeben möchten, können Sie stattdessen die Methode querySelectorAll() verwenden.
(3) Das FileReader-Objekt ermöglicht es Anwendungen, den Inhalt von auf dem Computer gespeicherten Dateien asynchron zu lesen, indem ein File- oder Blob-Objekt verwendet wird, um die zu lesende Datei oder die zu lesenden Daten anzugeben. Das File-Objekt kann ein FileList-Objekt sein, das nach Auswahl einer Datei im d5fd7aea971a85678ba271703566ebfd-Element zurückgegeben wird
(4) readAsDataURL: Zeigt die gelesene Bilddatei direkt auf der Webseite an, um einen Vorschaueffekt zu erzielen
Codeanzeige
<!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>Effektanzeige
bevor die Auswahl aufgehoben wird
Nach der Auswahl
Zusammenfassung: Das Obige ist der Inhalt dieses Artikels. Ich hoffe, Ihnen dabei zu helfen, zu lernen, wie Sie HTML5 zum Hochladen von Dateien verwenden.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Datei-Upload-Funktion in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!