Bouton de téléchargement d'image

Question

Comment transformer le div avec l'id "uploadWrapper" de ce qui suit ? jsFiddle en un bouton permettant de télécharger des images - ce qui revient à faire la même chose que <input type="file"> . Merci d'avance.

EDIT - EN RAISON DES RÉPONSES REÇUES

Comment puis-je afficher un aperçu de l'image à la place de la division avec un fond bleu lorsque quelqu'un télécharge une image, voir ceci jsFiddle

Answer 1

Vérifiez ce violon : http://jsfiddle.net/techfoobar/kM9aa/1/

Avant-première : Comme l'a dit Justin Satyr, il n'y a aucun moyen d'utiliser le plan HTML/JS pour prévisualiser l'image choisie, à moins de la télécharger sur votre serveur et d'utiliser l'URL de l'image téléchargée.

Answer 2

Vous ne pouvez pas le faire à moins d'utiliser Flash, Silverlight ou un objet Active-X. Les navigateurs verrouillent toutes les opérations de navigation dans les fichiers.

Vous pouvez sembler le faire en faisant de la <input type="file" /> invisible mais au-dessus d'un bouton, de sorte que lorsque l'utilisateur clique sur le "bouton", il clique en fait sur l'icône de l'entreprise. input .

UPDATE :

En réponse à votre deuxième question, pour prévisualiser l'image, vous devez l'afficher sur votre serveur, puis faire pointer l'adresse de votre serveur vers l'extérieur. img 's src vers un chemin d'image sur votre serveur.

Answer 3

Ce n'est pas aussi facile à faire qu'on pourrait l'imaginer, et certains navigateurs empêchent automatiquement le déclenchement de téléchargements de fichiers à partir d'éléments non fiables pour des raisons de sécurité.

Je recommande d'utiliser un plugin de téléchargement de fichiers tiers, tel que Plupload ou de simuler un bouton personnalisé en utilisant l'amélioration progressive (bouton de téléchargement de fichiers invisible, avec un graphique personnalisé en dessous (bien sûr, ce n'est pas la solution la plus flexible) comme décrit ici :

http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

---

Plupload events vous permet de vous connecter aux événements qui peuvent se produire pendant le téléchargement de fichiers par ajax, et de faire des choses avec les informations de téléchargement. Voir cette page pour des exemples de données de réponse que vous pourriez obtenir :

http://www.plupload.com/example_events.php

Vous pouvez obtenir des données de réponse comme ceci :

id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png

Et bien sûr, vous pouvez modifier ce que le serveur renvoie en cas de téléchargement réussi, afin de pouvoir obtenir l'URL absolue complète de l'image téléchargée.

Une fois que vous avez ces données, vous pouvez vous y connecter et changer l'image en faisant quelque chose comme ceci (avec jQuery) :

// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
    $('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}