Uploading image sélectionnée sans rafraîchir la page

Question

Sur une de mes pages j'utilise plusieurs formes, chacune contient des données spécifiques (donc il y a une forme avec le prénom de l'utilisateur, nom, etc. il y a un autre avec l'adresse de l'utilisateur et ainsi de suite). Chaque formulaire a un bouton "Enregistrer les modifications" et j'utilise les appels Ajax pour envoyer des données au serveur. Le problème est - sur l'une des formes, l'utilisateur peut télécharger sa photo, en utilisant le téléchargement de fichiers Bootstrap (donc, d'abord, il sélectionne l'image, puis clique sur « Enregistrer » - seulement le fichier envoyer au serveur), mais je ne peux pas trouver un moyen de le faire sans recharger la page.

D'abord, j'ai essayé d'utiliser iframe caché, mais il semblerait que je ne peux pas faire copier mes données de fichier à l'Iframe, donc c'est un non.

Maintenant, je suis en train d'utiliser ceci:

GithHub File Upload

mais, une fois que je l'inclure dans ma page, Uploader fichier Bootstrap cesse de fonctionner correctement, c'est - à chaque fois que je sélectionne une image automatiquement démarre le téléchargement du fichier. Une partie bizarre est - cela arrive même quand il n'y a pas de code init pour fileuploader, il suffit d'inclure du code. J'ai essayé suggéré « fixe », qui est - j'ai essayé redéfinissant la méthode add comme ceci:

$('#file').fileupload({ 
    dataType: 'json', 
    add: function (e, data) { 
     data.context = $('<button/>').text('Upload') 
     .appendTo(document.body) 
     .click(function() { 
      data.context = $('<p/>').text('Uploading...').replaceAll($(this)); 
      data.submit(); 
     }); 
    }, 
    done: function (e, data) { 
     data.context.text('Upload finished.'); 
    } 
}); 

Mais « ajouter » n'est pas d'être frappé pour une raison quelconque ...

Qu'est-ce que je fais mal ici ? Ou y a-t-il un autre moyen de réaliser ce que je veux?

EDIT 1:

Voici le code que je l'utilise pour l'image téléchargement:

@using (Html.BeginForm("ProfileSavePictureData", "Animator", FormMethod.Post, new { enctype = "multipart/form-data", id = "pictureDataForm" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(null, new { id = "profilePictureDataValidationSummary" }) 

    @Html.HiddenFor(x => x.UserDataId) 
    @Html.HiddenFor(x => x.UserId) 

    <div class="form-group"> 
     <div class="fileupload fileupload-new" data-provides="fileupload"> 
      <input type="hidden" value="" name="" /> 
      <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"> 
       @if (Model == null || String.IsNullOrEmpty(Model.Picture)) 
       { 
        <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt=""> 
       } 
       else 
       { 
        <img src="@Model.Picture" alt="@ViewBag.PictureNotAviableLabel" alt=""> 
        @Html.HiddenFor(x => x.Picture)<br /> 
       } 
      </div> 
      <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; 
       max-height: 150px; line-height: 2px;"> 
      </div> 
      <div> 
       <span class="btn default btn-file"><span class="fileupload-new"><i class="fa fa-paper-clip"> 
       </i> 
        @ViewBag.ChoosePicture 
       </span><span class="fileupload-exists"><i class="fa fa-undo"></i> 
        @ViewBag.ChangePicture 
       </span> 
        <input type="file" class="default" name="file" /> 
       </span><a href="#" class="btn red fileupload-exists" data-dismiss="fileupload"><i 
        class="fa fa-trash-o"></i> 
        @ViewBag.RemovePicture 
       </a> 
      </div> 
     </div> 
     <span class="label label-danger"> 
      @ViewBag.InfoLabel 
     </span><span> 
      @ViewBag.PictureMinatureWarning 
     </span> 
    </div> 
    <div class="margin-top-10"> 
     <button id="btnSaveChengesProfilePictureData" type="button" class="btn btn-default">@ViewBag.SaveChangesButtonLabel</button> 
     <input type="submit" /> 
    </div> 
} 

Comme vous pouvez le voir, il y a deux boutons en bas - ni fait ce que je veux ...

Answer 1

J'ai déjà fait cette petite démo. Ce n'est pas récent mais je l'espère, vous indiquera la bonne direction. Basiquement envoie les données du fichier via Ajax au serveur, le serveur enregistre le fichier et renvoie le chemin. De cette façon, vous pouvez faire un aperçu de l'image:

Démo: http://silviarebelo.com/demos/file_upload_ajax/

projet Github: https://github.com/teknotica/file-upload-preview

Answer 2

J'ai finalement réussi à faire ce que je voulais en utilisant cette bibliothèque:

https://cmlenz.github.io/jquery-iframe-transport/

Et par exemple le code de la page ci-dessus. Cette bibliothèque est également incluse dans jquery-file-upload, mais cette version est modifiée et ne fonctionnera pas avec l'exemple de la page ci-dessus.

Answer 3

Un exemple sur la façon de créer un formulaire de téléchargement d'images simple sans actualisation de page à l'aide de Bootstrap, jQuery AJAX et PHP (view live demo).

JavaScript:

function noPreview() { 
    $('#image-preview-div').css("display", "none"); 
    $('#preview-img').attr('src', 'noimage'); 
    $('upload-button').attr('disabled', ''); 
} 

function selectImage(e) { 
    $('#file').css("color", "green"); 
    $('#image-preview-div').css("display", "block"); 
    $('#preview-img').attr('src', e.target.result); 
    $('#preview-img').css('max-width', '550px'); 
} 

$(document).ready(function (e) { 

    var maxsize = 500 * 1024; // 500 KB 

    $('#max-size').html((maxsize/1024).toFixed(2)); 

    $('#upload-image-form').on('submit', function(e) { 

    e.preventDefault(); 

    $('#message').empty(); 
    $('#loading').show(); 

    $.ajax({ 
     url: "upload-image.php", 
     type: "POST", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(data) 
     { 
     $('#loading').hide(); 
     $('#message').html(data); 
     } 
    }); 

    }); 

    $('#file').change(function() { 

    $('#message').empty(); 

    var file = this.files[0]; 
    var match = ["image/jpeg", "image/png", "image/jpg"]; 

    if (!((file.type == match[0]) || (file.type == match[1]) || (file.type == match[2]))) 
    { 
     noPreview(); 

     $('#message').html('<div class="alert alert-warning" role="alert">Unvalid image format. Allowed formats: JPG, JPEG, PNG.</div>'); 

     return false; 
    } 

    if (file.size > maxsize) 
    { 
     noPreview(); 

     $('#message').html('<div class=\"alert alert-danger\" role=\"alert\">The size of image you are attempting to upload is ' + (file.size/1024).toFixed(2) + ' KB, maximum size allowed is ' + (maxsize/1024).toFixed(2) + ' KB</div>'); 

     return false; 
    } 

    $('#upload-button').removeAttr("disabled"); 

    var reader = new FileReader(); 
    reader.onload = selectImage; 
    reader.readAsDataURL(this.files[0]); 

    }); 

}); 

PHP:

<?php 
session_start(); 
if (isset($_FILES["file"]["type"])) 
{ 
    $max_size = 500 * 1024; // 500 KB 
    $destination_directory = "upload/"; 
    $validextensions = array("jpeg", "jpg", "png"); 
    $temporary = explode(".", $_FILES["file"]["name"]); 
    $file_extension = end($temporary); 
    // We need to check for image format and size again, because client-side code can be altered 
    if ((($_FILES["file"]["type"] == "image/png") || 
     ($_FILES["file"]["type"] == "image/jpg") || 
     ($_FILES["file"]["type"] == "image/jpeg") 
     ) && in_array($file_extension, $validextensions)) 
    { 
    if ($_FILES["file"]["size"] < ($max_size)) 
    { 
     if ($_FILES["file"]["error"] > 0) 
     { 
     echo "<div class=\"alert alert-danger\" role=\"alert\">Error: <strong>" . $_FILES["file"]["error"] . "</strong></div>"; 
     } 
     else 
     { 
     if (file_exists($destination_directory . $_FILES["file"]["name"])) 
     { 
      echo "<div class=\"alert alert-danger\" role=\"alert\">Error: File <strong>" . $_FILES["file"]["name"] . "</strong> already exists.</div>"; 
     } 
     else 
     { 
      $sourcePath = $_FILES["file"]["tmp_name"]; 
      $targetPath = $destination_directory . $_FILES["file"]["name"]; 
      move_uploaded_file($sourcePath, $targetPath); 
      echo "<div class=\"alert alert-success\" role=\"alert\">"; 
      echo "<p>Image uploaded successful</p>"; 
      echo "<p>File Name: <a href=\"". $targetPath . "\"><strong>" . $targetPath . "</strong></a></p>"; 
      echo "<p>Type: <strong>" . $_FILES["file"]["type"] . "</strong></p>"; 
      echo "<p>Size: <strong>" . round($_FILES["file"]["size"]/1024, 2) . " kB</strong></p>"; 
      echo "<p>Temp file: <strong>" . $_FILES["file"]["tmp_name"] . "</strong></p>"; 
      echo "</div>"; 
     } 
     } 
    } 
    else 
    { 
     echo "<div class=\"alert alert-danger\" role=\"alert\">The size of image you are attempting to upload is " . round($_FILES["file"]["size"]/1024, 2) . " KB, maximum size allowed is " . round($max_size/1024, 2) . " KB</div>"; 
    } 
    } 
    else 
    { 
    echo "<div class=\"alert alert-danger\" role=\"alert\">Unvalid image format. Allowed formats: JPG, JPEG, PNG.</div>"; 
    } 
} 
?> 

Demo et le code source disponible à l'adresse:

https://github.com/ShinDarth/Bootstrap-image-upload-form