Discussion :

[jojo_ol76]

Bonjour,

J'ai un champ auquel je saisir le nombre d'images à insérer, qui créer dynamiquement

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="file" name="file" id="file"  />

le nombre de bouton Parcourir afin de chercher chaque images.

Ce que je souhaite faire, c'est dès la sélection d'une image, le preview de l'image doit s'afficher donc N previews pour N images choisies.

Comment faire cela?

Merci d'avance.

[sekaijin]

NON
pour des raison de sécurité le navigateur ne peux accéder au donnée du disque

Mais oui moyénant un peut de travail
su le champs ile il faut mettre un handler lorsque la valeur change (I.E. un fichier est sélectionné) un Appel Asynchrone envoie le fichier au serveur. celui-ci l'examine et vérifie qu'il n'est pas indésirable
il le garde en zone temporaire et retourne une url vers ce fichier
lorsque le client reçoit la réponse in crée un objet image avec l'url.

lorsque le formulaire est posté le serveur récupère tout les fichiers images re vérifie qu'il ne sont pas indésirables (virus). un hacker peut très facilement contourner le fait qu'ils ont déjà été vérifié.
il supprime touts les fichiers mis en zone temporaire de ce client et fini de traiter le formulaire.

si le client ne poste pas sont formulaire les fichiers vont s'accumuler. pour l'éviter il faut régulièrement faire le ménage de la zone temporaire. par exemple supprimer tout ce qui à plus d'1 heure.

si l'application a un monde connecter on peut aussi faire le ménage lorsqu'un utilisateur ferme sa session

A+JYT

[jojo_ol76]

Alors prenons l'exemple du site leboncoin.fr comment font-ils?

[SylvainPV]

sekaijin t'a répondu, ça commence à "Mais oui moyennant un peu de travail". A commencer par lire jusqu'à bout les réponses

[earhater]

Il y a quand même un moyen incompatible de faire ce que tu cherche.

Détecte l'évenement onchange de ton input
Après avec un FileReader tu peux lire les fichiers (avec un filereader.readAsDataURL(image));

[sekaijin]

Oui et Non

en HTML5 tu as effectivement l'API File qui contient
File, FileList, FileReader et Blob
tu va effectivement pouvoir lire si le navigateur est compatible le contenu du fichier
mais tu ne pourras pas mettre le contenus du fichier dans un element image

A+jyt

[SylvainPV]

mais tu ne pourras pas mettre le contenus du fichier dans un element image

Euh ça c'est faux, une fois l'image lue on peut tout à fait la mettre en dataURL d'un élément image.
Démo ici : http://jsfiddle.net/wfuPL/

[earhater]

Tu peux même le mettre dans un canvas pour faire des opérations de pre-traitement

[sekaijin]

C'est vrai j'oubliais le base64 pour placer le contenu dans l'url

merci de me re-brancher les neurones

Mais HTML5 seulement et si supporté par le navigateur
pour le vérifier il faut tester la présence de window.File window.FileReader etc.

A+JYT