Sont-il des limitations de taille de fichier lors de l'utilisation de javascript FileReader API?
Vous pouvez utiliser javascript FileReader API pour afficher un aperçu d'une image qui est fournie à partir d'un fichier de champ de saisie.
Cela est très utile dans le sens que vous n'avez pas à utiliser côté serveur php et ajax pour afficher l'image.
Ma question est: est-ce
Est-il une limite à la taille du fichier image à utiliser? Comme si l'utilisateur était de sélectionner une image qui est de 20 mo, le filereader être capable de les gérer? Et les machines à mémoire de devenir potentiellement max-ed?
Je suis en essais juste en local sur ma machine pour le moment. J'ai essayé de charger un fichier bmp (53MB!), ce qui a pris environ 15 secondes de traiter et d'afficher sur la page.
Autres fichiers en 1/2MB généralement d'afficher instantanément.
Ce n'est probablement pas nécessaire, mais c'est 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"> </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>Tout problème relatif à la capacité, comme cela a toujours la même réponse: ça marchera jusqu'à ce qu'il n'a pas, et il dépend de la capacité du client. Un bon smartphone n'aurez pas autant de capacités qu'un ordinateur de bureau avec beaucoup de RAM.
OriginalL'auteur Patrick Keane | 2013-12-20
Vous devez vous connecter pour publier un commentaire.
Il semble en Chrome 45 la limite est de 261 MO.
Malheureusement, il n'y a pas d'erreur (
FileReader.error == null) lorsque la taille est au-dessus de cette limite, le résultat est tout simplement une chaîne vide.tout fonctionnaire docs de Google sur la limitation?
J'ai été incapable d'en trouver. J'ai remarqué que le nombre est de l'ordre de grandeur de la durée maximale de Javascript longueur de la chaîne, qui est de 2^28 ou 2^29 ou quelque chose comme ça.
Cela pue. Moyen de contourner ce problème? Comment suis-je censé pour sérialiser des données de fichier en AJAX formulaire?
Il y a vraiment besoin d'être la documentation officielle de ce!
OriginalL'auteur AndreKR
Il apparaît qu'il y a pas de limitation sur la taille du fichier. J'ai fait la même chose que vous dans le passé et a remarqué que le délai avant l'affichage est en raison du stockage dans la ram/navigateur. De sorte que le délai dépendra de l'ordinateur de l'utilisateur. Si vous avez à traiter avec beaucoup de grandes images (> 10 MO), vous pouvez mettre un gif chargeur pendant le chargement.
Il ne sera pas un problème pour #uploadPreview à tous. Mais rappelez-vous que si l'image a une résolution élevée (par exemple.2000x2000) et le #uploadPreview est une petite boîte (eg. 100x100), l'image va être revus à la baisse et vous remarquerez que certains aliasing sur l'image.
Ceci est incorrect, la réponse correcte est qu'il y a une limite dure.
OriginalL'auteur ClemSndr