web-dev-qa-db-fra.com

Téléchargement d’images frontales avec aperçu - est-ce possible dans WP?

J'ai créé un formulaire frontal et possède plusieurs champs de téléchargement d'image. J'ai pu créer un post et avoir les images en pièce jointe. Mais ce que je voudrais faire, c’est que l’utilisateur voie un aperçu de l’image qu’il est sur le point de télécharger avant de soumettre le message.

J'ai lu pas mal d'alternatives, Uploadify, Valums.com http://valums.com/ajax-upload , SWFupload et quelques autres Je ne m'en souviens pas. Mais le problème avec chacun d'eux est qu'une fois que je les implémente dans le formulaire, les images ne sont plus attachées à l'article, mais seulement téléchargées sur le serveur.

Toute suggestion ou exemple de code que je peux utiliser pour le faire? J'ai parcouru le net pour trouver une réponse. Peut-être que WP ne peut tout simplement pas prévisualiser une image et la joindre également à un message sous une forme?

uploadsimages
2
user7481

Il suffit d'ajouter ces scripts dans l'en-tête

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
   var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
     function readURL(input) {
       if (input.files && input.files[0]) {
        var reader = new FileReader();

         reader.onload = function (e) {
           $('#img_prev')
           .attr('src', e.target.result)
           .height(100);
         };

        reader.readAsDataURL(input.files[0]);
    }
      else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
});
</script>

Ajouter pour Internet Explorer:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ajoutez du style à l'en-tête.

<style>
 article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
 #x { display:none; position:relative; z-index:200; float:right}
 #previewPane { display: inline-block; }
</style>

Notez que ceci devrait être ajouté dans l'en-tête de cette page ou de votre thème et ce sera une barre de téléchargement avec aperçu. Vous pouvez également annuler l'aperçu avec ceci.

<input type='file' onchange="readURL(this);" /><br/>


<span id="previewPane">
 img id="img_prev" src="#" alt="your image" />
 span id="x">[X]</span> </div> </div>
3
vaibhav