Affichage de l'image téléchargée après le téléchargement réussi

J'utilise le gemme Carrierwave à l'intérieur de Magnific Popup (lightbox). Ce que je veux faire, c'est qu'après avoir téléchargé une image, elle affichera l'image nouvellement téléchargée.

Actuellement, après qu'une image est téléchargée à partir de la boîte à lumière, elle continuera d'afficher l'image que vous aviez initialement visionnée avec un message de "réussite" que votre image a été téléchargée avec succès.

  • Le déchargement de l'événement peut-il être utilisé pour faire une demande de décharge rapide d'ajax?
  • Cross-site AJAX utilisant jQuery
  • L'appel jQuery AJAX renvoie
  • Quelle est la meilleure bibliothèque pour faire une URL hash / history dans JQuery?
  • Existe-t-il une meilleure pratique pour générer html avec javascript
  • Quel est le moyen facile de voir ce que AJAX appelle sont en cours?
  • La configuration actuelle est Utilisateurs cliquez sur une photo qui ouvrira une lightbox avec leurs photos de galeries. À l'intérieur de la boîte à lumière, vous pouvez supprimer la photo actuelle, télécharger une nouvelle photo ou la rendre votre avatar.

    Photos.js.coffee:

    jQuery -> $('form#new_photo').fileupload dataType: "script" add: (e, data) -> file = data.files[0] data.context = $(tmpl("template-upload", file)) $('#new_photo').append(data.context) data.submit() progress: (e, data) -> if data.context progress = parseInt(data.loaded / data.total * 100, 10) data.context.find('.bar').css('width', progress + '%') stop: (e, data) -> $('.upload').hide() 

    Contrôleur de photos:

      def create @photo = Photo.create(params[:photo]) @photo.user = current_user if @photo.save flash[:notice] = "Successfully created photos." redirect_to :back else render :action => 'new' end end 

    Show.html.slim:

      -if @user.photos.present? .slider_container h4 Photos a.left_arrow href="#" img alt="" src="/assets/left_arrow.png" / ul.slider.parent-container = hidden_field_tag 'current_index',0 -@user.photos.each_with_index do |photo, index| li class="#{index > 2 ? 'hide' : ''}" = link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo) div id="#{dom_id(photo)}" class="mfp-hide" center = image_tag(photo.image_url(:popup)) - if @user == current_user = button_to('Set as Profile Image', [:avatar, photo], class: 'btn') ' = button_to "remove", photo, :confirm => 'Are you sure?', :method => :delete, class: 'btn' = form_for Photo.new do |f| = f.label :image, "Upload photos:" = f.file_field :image, multiple: true, name: "photo[image]" script#template-upload type="text/x-tmpl" .upload | {%=o.name%} .progress .bar style=("width: 0%") 

  • JQuery mobile: Comment invoquer ce message (par défaut) d'erreur de chargement de la page?
  • Pourquoi mon gestionnaire de bouton jQuery n'est-il pas lancé?
  • Pourquoi jQuery.ajax () ajoute-t-il un paramètre à l'url?
  • Annuler la requête précédente ajax sur nouvelle demande
  • Pourquoi le navigateur ne suit-t-il pas les redirections en utilisant XMLHTTPRequest et CORS?
  • L'appel jquery $ .ajax entraîne une réponse non autorisée 401 lors de Chrome ou Firefox, mais fonctionne dans IE
  • 2 Solutions collect form web for “Affichage de l'image téléchargée après le téléchargement réussi”

    Personnellement, je préférerais utiliser http://blueimp.github.io/jQuery-File-Upload/

    • Des tâches compliquées comme la demande de chargement d'arrêt.
    • Téléchargements avec des navigateurs sans téléchargement de fichiers XHR
    • Chargement asynchrone

    Il a également la documentation https://github.com/blueimp/jQuery-File-Upload/wiki/API


    Si vous voulez le faire vous-même, envoyez json en arrière avec l'URL de l'image.

     var imageurl = ""; $('#inputValue').attr("src", imageurl); 

    Par exemple, je lie la valeur d'entrée à l'URL

     $('#inputName').bind('input',function(){ $('#inputValue').attr("src", $(this).val()); }); 

    Demo http://jsfiddle.net/margusmartsepp/83w51u85/

    Vous faites cela très compliqué …

    Ceci est la solution simple. Effectuez la fonction javascript pour envoyer l'image sélectionnée à l'aide d'ajax.

     <script> var client = new XMLHttpRequest(); function upload_banner() { var file = document.getElementById("file"); var formdata = new FormData(); formdata.append("file", file.files[0]); var files=document.getElementById('file').files; var file_name=files[0].name; //alert(file_name); var file_extension=file_extension_get(file_name); if( file_extension == "jpg" || file_extension == "JPG" || file_extension == "jpeg" || file_extension == "JPEG" || file_extension == "gif" || file_extension == "GIF" || file_extension == "png" || file_extension == "PNG" ) { client.open("post", "small_img.php", true); client.send(formdata); /* Send to server */ } else { alert("Wrong file format"); } } /* Check the response status */ client.onreadystatechange = function() { alert(client.readyState+"sssss"+client.status); if (client.readyState == 4 && client.status == 200) { var m=client.responseText.toString(); $("#upload_img_view").html(m); upload_id(); } } function file_extension_get(file) { return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : ''; } function upload_id() { var uploadid=document.getElementById('upload_id').value; $("#banner_id").val(uploadid); return true; } </script> 

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++

    Dans le fichier Html, écrivez le code ci-dessous pour télécharger le fichier.

     <input type="file" id="file" name="file" onchange="upload_banner()" required name="file_create_video"> <br> <div class="uplod-img" id="upload_img_view"> 

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++

    Dans le fichier php, utilisez le code ci-dessous small_img.php

     $path = "/var/www/upload/profile_pic/"; if(move_uploaded_file($tmp, $path.$actual_image_name)) { echo "<img src='$u' height='100%' width='100%'> <input type='hidden' id='upload_id' name='upload_id' value='$k' >"; } 

    Cela fonctionne pour moi … essayez-le … faites quelques modifications en fonction de votre code

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.