Comment faire de la programmation Asynchrone(AJAX) de Téléchargement de Fichiers à l'aide d'une iframe?

Je suis en train de faire de l'ajax upload de fichier . J'ai lu qu'il n'est pas possible de le faire sans l'aide de iframe .

J'ai écrit :

<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe>
<form id="myForm" action="file-component" method="post" enctype="multipart/form-data"  target="uploadTrg">
File: <input type="file" name="file">
<input type="submit" value="Submit" id="submitBtn"/>
</form>

et à l'aide de jquery forme de plugin : 

$('#myForm').ajaxForm({
    dataType:  'json',
    success:   function(data){
        alert(data.toSource());
    }
});

Le Résultat :

le fichier est téléchargé avec succès et je peux voir le fichier téléchargé , mais une boîte de dialogue apparaît :

Comment faire de la programmation Asynchrone(AJAX) de Téléchargement de Fichiers à l'aide d'une iframe?

depuis que j'ai renvoyer un résultat json pour afficher le nom de fichier + taille etc ..

Ma Question :
Comment puis-je utiliser l'iFrame pour être en mesure de faire "ajax téléchargement de fichiers".

Remarque:

  1. Je ne préfère pas utiliser des plugin pour télécharger le fichier , s'il est plus approprié et plus facilement des solutions.
  2. - Je utiliser jsp/servlets comme un langage côté serveur .. mais je pense qu'il n'a pas de sens la langue que j'utilise .

Grâce

  • Dans votre #1, faites-vous référence à jQuery plugins, ou vous entendez-vous Flash/Silverlight?
  • Je veux dire .. plugins jQuery.
  • J'design simplifié ajax style de téléchargement de fichier de la page sans l'aide de JavaScript. - Je placer une iFrame caché juste avant la balise form. Veuillez lire ce qui suit. ramui.com/articles/ajax-file-upload-using-iframe.html
InformationsquelleAutor Abdullah | 2010-05-26
  1. 95

    Je vais répondre à ma question , je pense que j'ai trouvé la solution. Ce sont les étapes que j'ai suivies pour atteindre l'objectif :

    1. Faire de l'attribut "cible" de la forme point de "iframe " .
    2. Utilisation normale de demande HTML ( pas Asynchrone/requête Ajax ) pour soumettre le formulaire.
    3. Parce que l'image cible est l'iframe , c'est l'ensemble de la page ne sera pas actualisé - il suffit de l'iframe.
    4. Une fois iframe onload événement se produit (capture de l'événement à l'aide de Javascript), puis faire ce que vous voulez, par exemple, Vous pouvez envoyer une demande à la liste récente téléchargé le fichier info.

    La version finale du code ressemble à ceci:

        <!-- Attach a file -->

    <iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="yes"></iframe>

    <form id="myForm" action="http://example.com/file-upload-service" method="post" enctype="multipart/form-data"  target="uploadTrg">

        File: <input type="file" name="file">
        <input type="submit" value="Submit" id="submitBtn"/>

    </form>

    <div id="ajaxResultTest"></div>

    javascript :

    $("iframe").load(function(){
    //ok , now you know that the file is uploaded , you can do what you want , for example tell the user that the file is uploaded 
    alert("The file is uploaded");

    //or you can has your own technique to display the uploaded file name + id ? 
    $.post('http://example.com/file-upload-service?do=getLastFile',null,function(attachment){

       //add the last uploaded file , so the user can see the uploaded files
       $("#ajaxResultTest").append("<h4>" + attachment.name + ":" + attachment.id "</h4>");

    },'json');
});
    • +1 pour trouver la solution vous-même.
    • La cible attribut est obsolète (w3schools.com/TAGS/att_form_target.asp). Je commence à croire que l'on doit utilisé soit obsolète (X)HTML ou Flash/etc. pour accomplir ce /doit être/ très primitive de la fonctionnalité.
    • +1 pour votre très bonne solution. Mais les mesures ne sont pas très claires. Vous devriez probablement supprimer un code supplémentaire et de vous expliquer les principales parties qui sont expliquées ici: ramui.com/articles/ajax-file-upload-using-iframe.html
    • Vous avez raison , j'ai supprimé le code supplémentaire et j'ai essayé de clarifier la réponse un peu plus.
    • Belle solution ! +1
    • J'ai vérifié MDN et je ne vois pas où il dit que la cible de l'attribut dans l'élément de formulaire HTML est obsolète. MDN est beaucoup plus fiable des ressources que W3Schools de sorte que son possible, vous vous trompez. Voici le lien: developer.mozilla.org/en-US/docs/Web/HTML/Element/form
    • C'est en HTML5 et en HTML4.01 lâche (w3.org/TR/html401/loose.dtd), mais pas HTML4.01 stricte (w3.org/TR/html401/strict.dtd). Dans le de 3,5 ans depuis cela a été demandé, de nombreux libs pour faire de cette échéance. J' fortement vous recommandons de ne pas mettre en œuvre manuellement.
    • voulais la mettre en œuvre manuellement juste pour le plaisir de l'apprentissage. Je vais regarder dans la source de ces bibliothèques. Merci pour le heads up!
    • L'attribut target est pris en charge dans HTML5. 😉
    • Belle explication. Cependant, au lieu de faire un autre ajax post, vous pouvez l'écho d'une réponse dans l'iframe contenu et à le lire en js
    • Merci De m'aider. Été à la recherche d'un moyen de le faire pour une semaine.

    InformationsquelleAutor Abdullah
  2. 4

    Cet exemple pris de BugKiller. complet de travail qui vous permet de télécharger un logo et consultez immédiatement dans la page html, à la suite de laquelle le téléchargement de la valeur est effacée:

    html:

    <form id="uploadForm" method="post" enctype="multipart/form-data"  target="uploadTrg">
  <div id="fileUploadWrapper"><input type="file" name="file" id="fileUpload"></div>
  <input type="submit" value="Upload" id="submitBtn"/>
</form>
<iframe id="uploadTrg" name="uploadTrg" height="0" width="0" frameborder="0" scrolling="no" style="display:none"></iframe>
<img id="imgLogo" style="border-width:0px;" />

    javascript:

    $(document).ready(function () {
  var companynumber = '12345'; //get this from the database
  var logoUploadUrl = 'UploadHandler.aspx?logoupload=true&companynumber=' + companynumber ;
  $("#uploadForm").attr("action", logoUploadUrl);

  $("#uploadTrg").load(function () {
    //upload complete

    //only way to reset contents of file upload control is to recreate it
    $("#fileUploadWrapper").html('<input type="file" name="file" id="fileUpload">');

    //reload the logo url, add ticks on the end so browser reloads it
    var ticks = ((new Date().getTime() * 10000) + 621355968000000000);
    var logoUrl = 'images/clients/' + companynumber + '/client.gif?' + ticks;
    $("#imgLogo").attr('src', logoUrl);
  });
});

    télécharger gestionnaire de code derrière (C#):

    namespace MyWebApp {
    public partial class UploadHandler : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e) {
          if (Request.Params["logoupload"] != null) {
            string companynumber = Request.Params["companynumber"];
            string savePath = Server.MapPath("\\images") + "\\clients\\" + companynumber + "\\client.gif";
            if (File.Exists(savePath))
                File.Delete(savePath);
            //save the file to the server 
            Request.Files[0].SaveAs(savePath);

            Response.Write("OK");
            Response.Flush();
            Response.End();
          }
       }
}
    • Il pourrait être intéressant de mettre à jour ce depuis le $("#uploadTrg").load(function () { bit est obsolète maintenant.
    InformationsquelleAutor JJ_Coder4Hire