Cet article présente principalement JavaScript pour utiliser FileReader pour obtenir un effet de prévisualisation du téléchargement d'images. Il a une certaine valeur de référence pour l'apprentissage de JavaScript. Les amis intéressés par JavaScript peuvent se référer à cet article. >FileReader fait partie de l'API de fichiers HTML5. Il implémente un mécanisme de lecture de fichiers asynchrone. Vous pouvez considérer FileReader comme XMLHttpRequest, la seule différence est qu'il lit le
système de fichiersau lieu du serveur distant. Afin de lire les données du fichier , FileReader propose les méthodes suivantes.
dans l'attribut de résultat. Chaque caractère de la chaîne représente un octet.
<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("请选择图像文件。"); } });
Pour les étudiants qui ne sont pas familiers avec le téléchargement JavaScript, cet article peut être utilisé pour apprendre le téléchargement JavaScript ! !
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!