Javascript Girl
  1. Javascript Girl
  3. Existe-t-il des limitations de taille de fichier lors de l'utilisation de l'API FileReader javascript?
Intereting Posts
Création de deux éléments vidéo HTML5 avec la même source ne fonctionnant pas L'événement DOMContentLoaded est-il EXACTEMENT identique à la fonction .ready () de jQuery? Inverser les couleurs d'une image en CSS ou JavaScript Supprimer le formatage à partir d'un contenuEditable div Cliquez sur le bouton oublié (lien href), le champ de messagerie doit être validé à l'aide de javascript Héritage Javascript et postuler Analyse du code-clé du numéro de compte Javascript Obtenir la hauteur de largeur de l'image distante de l'url Correspond à deux champs avec jQuery validate plugin Comment définir la valeur de propriété de l'objet du contrôleur angulaire à partir de la directive dans la portée de l'enfant Accès à l'iframe à partir de l'extension chrome Poussez les objets JSON à array dans localStorage Erreur de sécurité, l'opération est incertaine dans les fichiers document.styles de firefox Comment puis-je faire défiler un div pour être visible dans ReactJS? Désinfection Javascript: le moyen le plus sécurisé d'insérer une chaîne XSS html possible

Existe-t-il des limitations de taille de fichier lors de l'utilisation de l'API FileReader javascript?

Vous pouvez utiliser javascript FileReader API pour afficher un aperçu d'une image fournie à partir d'un champ de saisie de fichier. Ceci est très utile dans le sens où vous ne devez pas utiliser le côté du serveur php et ajax pour afficher l'image.

Ma question est la suivante:

Existe-t-il une limite à la taille du fichier image utilisé? Comme si un utilisateur devait sélectionner une image de 20 Mo, le filereader pourrait-il la gérer? Et la mémoire des machines pourrait-elle devenir maximale?

Je teste actuellement localement sur ma machine pour le moment. J'ai tenté de charger un fichier bmp (53 Mo!), Qui a pris environ 15 secondes pour traiter et afficher sur la page. D'autres fichiers à 1/2 Mo affichent généralement instantanément.

C'est probablement pas nécessaire, mais voici mon fichier HTML: (FYI: ce code fonctionne bien dans les navigateurs pris en charge) 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Dropzone File Upload</title> </head> <body> <img id="uploadPreview" src="default.png" style="width: 100px; height: 100px;" /> <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> <p id="uploadProgress">&nbsp;</p> <script type="text/javascript"> function PreviewImage() { var avatar_image = document.getElementById("uploadImage"); var avatar_preview = document.getElementById("uploadPreview"); var avatar_progress = document.getElementById("uploadProgress"); if ( window.FileReader ) { //if supports filereader var imgReader = new FileReader(); imgReader.readAsDataURL(avatar_image.files[0]); //read from file input imgReader.onloadstart = function(e) { avatar_progress.innerHTML = "Starting to Load"; } imgReader.onload = function (imgReaderEvent) { //if file is image if ( avatar_image.files[0].type == 'image/jpg' || avatar_image.files[0].type == 'image/jpeg' || avatar_image.files[0].type == 'image/png' || avatar_image.files[0].type == 'image/gif' || avatar_image.files[0].type == 'image/bmp' ) { avatar_preview.src = imgReaderEvent.target.result; } else { avatar_preview.src = 'filetype.png'; } } imgReader.onloadend = function(e) { avatar_progress.innerHTML = "Loaded!"; } } /* For no support, use ActiveX instead */ else { document.getElementById("uploadPreview").src = "nosupport.png"; } }; </script> </body> </html>

Il semble que dans Chrome 45, la limite est de 261 Mo.

Malheureusement, il n'y a pas d'erreur ( FileReader.error == null ) lorsque la taille est supérieure à cette limite, le résultat n'est qu'une chaîne vide.

Il semble qu'il n'y ait aucune limitation sur le fichier. J'ai fait la même chose que vous dans le passé et j'ai remarqué que le temps avant l'affichage est dû au stockage en RAM / navigateur. Le délai dépend donc de l'ordinateur de l'utilisateur. Si vous devez faire face à beaucoup de grandes images (> 10 Mo), vous pouvez mettre un chargeur GIF pendant le chargement.