php & jquery télécharger l'image et l'affichage de l'aperçu instantanément

im hâte de créer un chargement de module où l'utilisateur peut parcourir, cliquez sur ouvrir et d'afficher instantanément un aperçu de l'image sans avoir à cliquer sur un bouton de soumission de sorte que l'utilisateur peut continuer à clé en d'autres informations.

j'ai fait simple, mais incomplète jquery ci-dessous qui, fondamentalement, la capture, le nom de l'image. mais ma question est comment puis-je poster le téléchargement de l'image du script php depuis il est il n'y a pas de bouton "soumettre" pour la POSTE? je ne peux pas capturer tableau $_FILES valeurs.

jquery:

$(document).ready(function() {
  $("#uploadimage").change(function() {
      var imagesrc = $("#uploadimage").val();
      $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(),
      function(data){
        //do something here
      },"json");
  });
});

formulaire html:

<form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST">
    <table> 
        <tr><td>Image: </td><td><div id="imagepreview"></div></td></tr> 
        <tr><td>Upload a photo: </td><td><input type="file" name="uploadimage" id="uploadimage" /></td></tr>
    </table> 
</form>

j'ai vu ce que Uploadify peut faire, mais je voudrais créer un sur mon propre.

ce qui concerne

Salut les gars, la Plupart des exemples qui nécessitent un bouton télécharger. mais je cherche un téléchargement automatique lorsque l'utilisateur sélectionne le fichier à télécharger. et tout cela va être fait sans rafraichissement de la page.

OriginalL'auteur nuttynibbles | 2010-06-27

1

Vous pouvez afficher des images que par l'affichage du formulaire, vous devez utiliser l'iframe de télécharger l'image sans rechargement de la page principale. Lorsque iframe recharge, ajouter un script dans sa réponse, qui déclenche la fonction de rappel dans la page principale pour afficher juste à l'image téléchargée.

Vous pouvez utiliser de l'AJAX. IFrames aurait été une pré-solution AJAX.
Tks. j'ai recherche assez abit pour l'iframe, mais la plupart des besoins de l'utilisateur, cliquez sur le bouton de téléchargement. j'aimerais voir ceux qui peuvent téléchargement automatique lorsque l'utilisateur sélectionne le fichier.
CORRECTION: Comme l'a souligné @codez et @bas, les fichiers ne peuvent pas être téléchargés via AJAX. Mon erreur.
salut lucanos, de sorte que le wat est le moyen de contourner cela? puis-je utiliser ajax soumettre au poste $_FILES à php les fichiers??
Regardez le tutoriel, je vous à, il doit avoir tout le code, des liens, et des instructions que vous devez réaliser le même genre de fonctionnalités dont vous avez besoin.

OriginalL'auteur codez
7

J'ai vu un article avec un jQuery solution pour ceci récemment:

Zurb aire de Jeux : "les Images à 100% Moins le Sucer. De la garantie."

Je voudrais réécrire ici, mais n'ont pas, comme il serait redondant.

hey c'est ce que je cherche. mais il n'y a aucun téléchargement de fichier pour elle. mais je vais essayer de la pièce, les codes d'ensemble de l'affichage de la source =)
1er. Ce n'est pas un jquery solution. À la 2ème place. Ses pas même solution ajax. Si vous regardez attentivement, js fichiers source, vous découvrirez que c'est la solution iframe.
Vous êtes à la fois bon et mauvais. Je n'ai jamais dit que c'était une solution AJAX, afin que le point est sans objet. Oui, l'AJAX fonction de Téléchargement ne utiliser un iframe pour effectuer le travail, mais, cette fonction a été enveloppé dans un plugin jQuery. Donc, en gros, c'est un jQuery solution.
hmm d'accord. à partir de la solution, je dun voir où est le script php d'appel pour télécharger l'image.
bon, je crois que je sais où appeler le script php.

OriginalL'auteur Luke Stevenson
4

Pour tout le monde ne peut pas trouver le ajaxupload.js script...
Vous pouvez le télécharger ici.

OriginalL'auteur P.B.
1

Les fichiers ne peuvent pas être téléchargés en utilisant AJAX pures. Vous souhaitez peut-être à la caisse de la Forme de Plugin qui prend en charge les téléchargements de fichiers: http://jquery.malsup.com/form/ et de l'intégrer à votre solution. Là, vous avez quelques bons exemples à l'aide de ajaxSubmit.

OriginalL'auteur bas
0

Vous aimeriez essayer ce tutoriel:

http://www.finalwebsites.com/forums/topic/php-ajax-upload-example

qui devrait vous aider à faire exactement ce que vous demandez.

OK. Je ne veux pas être une méchante mec, mais où est l'AJAXUPLOAD.JS SCRIPT! Désolé, mais tous ces tutoriels s'appuyer sur ce script, et il est nulle part pour être trouvée! Les gens il suffit de garder le référencement il y tutoriels, comme celui référencé par vous, mais quand vous allez sur le site et le télécharger, vous obtenez un peu bizarre fichier de dossiers sans l'ajaxupload.js script!!!!!!!! AIDER!!!!!!!!

OriginalL'auteur Craig

Il ne faut pas de bouton "soumettre". Vous pouvez simplement utiliser une image et de parcourir les fichiers et il va automatiquement envoyer à php.

<div id="covercameraimage">
<label for="photoimg">
<img src="siteimages/cameracoverimage.png" style="cursor:pointer" title="Upload Cover" alt="Upload Cover" />
</label>
<form id="imageform" method="post" enctype="multipart/form-data" action='c.php'>
<div id='imageloadstatus' style='display:none'><img src="load.gif" alt="Uploading...."/></div>
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<div id='imageloadbutton'>
<input type="file" id="photoimg" name="photoimg" style="cursor: pointer;  display: none"//>
</div>
</form>
</div>

<script type="text/javascript">
$(document).ready(function()
{

$('body').on('change','#photoimg', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#usercover',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>
</div>

OriginalL'auteur dave

<div class="control-group-upload">
     <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
             <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                 <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
             </div>
         <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
         <div>
             <span class="btn btn-file"><span class="fileupload-new">Select image</span>
             <span class="fileupload-exists">Change</span>
             <input type="file" class="default" />
         </span>
     <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
     </div>
</div>

Le code ci-dessus est de bootstrap.
Découvrez metronic modèle de bootstrap.

metronic modèle n'est pas libre de droit??
Oui, ce n'est pas gratuit.

OriginalL'auteur Max Avenger

Vous devez vous connecter pour publier un commentaire.