Comment prévisualiser une image en forme longue

Question

Je veux aperçu d'une image avant de l'envoyer sous une forme qui ont d'autres champs comme le nom, âge etc. i ont essayé la solution ajax. le code fonctionne bien autonome. Mais quand je mets le code dans le formulaire ça ne marche pas.plz m'aider.

le code est le suivant: Code autonome pour la prévisualisation de l'image par l'Ajax

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
Upload your image <input type="file" name="photoimg" id="photoimg" /> 
</form> 

et ma forme est

<form name="iupload" action="index.php" method="post" > 
Name <input type="text" name="myname" ><br/> 
Age <input type="text" name="age" > 
<input type="file" name="photoimg" id="photoimg" /> 

<input type="submit" name="submit" value="upload"> 

<div id='preview'> 
</div> 

</form> 

Answer 1

Je dirais que vous pouvez afficher l'image locale avant de le télécharger dans tous les navigateurs qui prend en charge le File API, et vieux versions d'IE (version 7 et ci-dessous).

Utilisation de l'API File, vous pouvez obtenir un blob local en utilisant la méthode window.URL.createObjectURL. IE8 bêta introduit un ajout « fakefile » pour cacher l'URL du fichier local, pour corriger un problème de sécurité comme expliqué here. Mais dans les versions plus anciennes, vous devriez être en mesure d'exploiter ce trou de sécurité.

Quelque chose comme cela pourrait fonctionner (fiddle):

$('form input[type=file]').change(function() { 
    var src; 
    if ('files' in this) { // File API supported (webkit/FF) 
     var obj = this.files[0]; 
     src = window.URL ? 
      window.URL.createObjectURL(obj) : 
      window.webkitURL.createObjectURL(obj); 
    } else { 
     if (/fake/.test(this.value)) { 
      // fallback to whatever (IE8, IE9) 
     } else { 
      src = this.value; // exploits the IE security hole 
     } 
    } 
    $(new Image()).attr('src',src).appendTo('body'); // the local image! 
}); 

Answer 2

Vous ne pouvez pas afficher un aperçu des images locales dans le navigateur. Le navigateur n'a pas accès au système de fichiers local. Vous devez utiliser Flash, Java ou plug-ins Active-X pour le faire

Answer 3

Avez-vous essayé d'autres plugins télécharger AJAX? J'ai personnellement essayé celui-ci et cela a fonctionné pour moi.

http://valums.com/ajax-upload/

Il y a un autre tutoriel sur la façon de l'utiliser ici:

http://css-tricks.com/ajax-image-uploading/