Affichage d'un aperçu du fichier image que l'utilisateur souhaite télécharger sur le site Web

Question

Comment puis-je afficher un aperçu de l'image que l'utilisateur choisit de télécharger sur le site Web. Je veux dire que lorsqu'un utilisateur choisit le fichier de son système, demandez à la page web de lui montrer les fichiers qu'il veut télécharger. comment je peux le faire en utilisant HTML et jQuery?

Answer 1

Vous ne pouvez pas, au moins pas dans tous les navigateurs.

En effet, certains navigateurs offrent tout le chemin à la <input type='file'> - cette façon, vous pouvez essayer de montrer l'élément sur le disque dur des utilisateurs (ne regardent pour certains paramètres de sécurité des navigateurs)

D'autres navigateurs simplement fournir un nom de fichier - vous n'avez rien à montrer ici.

Ce que vous pouvez toujours faire, c'est de télécharger le fichier en utilisant jQuery (.ajax, donc la page n'est pas rafraichie) et ensuite le montrer à l'utilisateur. En ces temps modernes, le téléchargement d'un fichier n'est pas si dérangeant (surtout si vous fournissez une animation pendant que ça fonctionne).

Si vous avez vraiment besoin de cette fonctionnalité, vous pouvez toujours utiliser une applet Java (pensez à facebook ou à imageshack) pour permettre des aperçus. Pas tous les utilisateurs ont (une version assez récente de) Java installé et activé cependant. Si vous souhaitez toujours implémenter cela pour les navigateurs qui fournissent le chemin d'accès complet (par exemple, vous travaillez dans un environnement d'entreprise et tout le monde utilise le même navigateur, ou vous le dégradez normalement et offrez simplement la fonctionnalité aux utilisateurs pour qui cela fonctionne), vous utilisez simplement le .val() du <input type='file'> pour obtenir le chemin d'accès au nom de fichier. Ajouter un file:// avant et affichage (décharge dans un img ou si)

Plus d'infos:

• Get full path of a file with FileUpload Control
• How to get the file path from HTML input form in Firefox 3
• https://developer.mozilla.org/en/using_files_from_web_applications
• https://bugzilla.mozilla.org/show_bug.cgi?id=143220

Answer 2

<div class="upload-preview"> 
    <img /> 
</div> 
<input class="file" name="logo" type="file"> 



$(document).ready(function(){ 
var preview = $(".upload-preview img"); 

$(".file").change(function(event){ 
    var input = $(event.currentTarget); 
    var file = input[0].files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e){ 
     image_base64 = e.target.result; 
     preview.attr("src", image_base64); 
    }; 
    reader.readAsDataURL(file); 
    }); 
}); 

vous pouvez utiliser ce violon http://jsfiddle.net/Kulgar/57F67/