Heim > Artikel > Web-Frontend > JavaScript verwendet FileReader, um einen Vorschaueffekt beim Hochladen von Bildern zu erzielen
Dieser Artikel stellt hauptsächlich JavaScript vor, um den Bild-Upload-Vorschaueffekt zu erzielen. Freunde, die sich für JavaScript interessieren, können sich auf diesen Artikel beziehen >FileReader ist Teil der HTML5-Datei-API. Es implementiert einen asynchronen Dateilesemechanismus. Sie können sich FileReader als XMLHttpRequest vorstellen. Der einzige Unterschied besteht darin, dass es das
Dateisystemliest und nicht den Remote-Server. Um die Daten in der Datei zu lesen, stellt FileReader die folgenden Methoden zur Verfügung.
im Ergebnisattribut. Jedes Zeichen im String repräsentiert ein Byte.
<p id="wrapper"> <input id="fileUpload" type="file" multiple /><br /> <p id="image-holder"> </p> </p>
$("#fileUpload").on('change', function () { //获取上传文件的数量 var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { // 循环所有要上传的图片 for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("你的浏览器不支持FileReader!"); } } else { alert("请选择图像文件。"); } });
Für Schüler, die mit dem Hochladen von JavaScript nicht vertraut sind, kann dieser Artikel zum Erlernen des Hochladens von JavaScript verwendet werden! !
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonJavaScript verwendet FileReader, um einen Vorschaueffekt beim Hochladen von Bildern zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!