Question Téléchargement de fichier jQuery Ajax


Puis-je utiliser le code jQuery suivant pour effectuer un téléchargement de fichier en utilisant la méthode post d'une requête Ajax?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Si c'est possible, dois-je remplir une partie "données"? Est-ce la bonne façon? Je publie uniquement le fichier sur le serveur.

J'ai cherché Google, mais ce que j'ai trouvé était un plugin alors que dans mon plan, je ne veux pas l'utiliser. Du moins pour le moment.


607
2018-02-23 16:58


origine


Réponses:


le téléchargement du fichier est ne pas possible grâce à ajax. Vous pouvez télécharger un fichier sans rafraîchir la page en utilisant IFrame. vous pouvez vérifier plus de détails ici

METTRE À JOUR:

Avec XHR2, le téléchargement de fichiers via AJAX est pris en charge. Par exemple. par Données de formulaire objet, mais malheureusement, il n'est pas supporté par tous / anciens navigateurs.

La prise en charge de FormData commence à partir des versions de navigateurs de bureau suivantes. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Pour plus de détails, voir Lien MDN


521
2018-02-23 17:03



Iframes n'est plus nécessaire pour télécharger des fichiers via ajax. Je l'ai fait récemment tout seul. Consultez ces pages:

Utilisation de téléchargements de fichiers HTML5 avec AJAX et jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Mise à jour de la réponse et nettoyage. Utilisez la fonction getSize pour vérifier la taille ou utilisez la fonction getType pour vérifier les types. Ajout de la barre de progression html et du code CSS.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

Comment utiliser la classe Upload

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

Code html Progressbar

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Progress css code

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

256
2018-05-30 07:00



Ajax poste et télécharger le fichier est possible. j'utilise jQuery $.ajax fonction pour charger mes fichiers. J'ai essayé d'utiliser l'objet XHR mais je n'ai pas pu obtenir de résultats du côté serveur avec PHP.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

Comme vous pouvez le voir, vous devez créer un objet FormData, vide ou de (sérialisé? $('#yourForm').serialize()) formulaire existant, puis joignez le fichier d'entrée.

Voici plus d'informations: - Comment télécharger un fichier en utilisant jQuery.ajax et FormData - Téléchargement de fichiers via jQuery, l'objet FormData est fourni et pas de nom de fichier, demande GET

Pour le processus PHP, vous pouvez utiliser quelque chose comme ceci:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

141
2017-07-24 16:28



Formulaire de téléchargement simple   

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>


74
2018-01-19 12:36



Je suis assez en retard pour cela, mais je cherchais une solution de téléchargement d'images basée sur ajax et la réponse que je cherchais a été dispersée dans ce post. La solution sur laquelle je me suis arrêté impliquait l'objet FormData. J'ai assemblé une forme de base du code que j'ai mis ensemble. Vous pouvez le voir montre comment ajouter un champ personnalisé au formulaire avec fd.append () ainsi que comment gérer les données de réponse lorsque la requête ajax est terminée.

Télécharger le code HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

Dans le cas où vous travaillez avec PHP, voici un moyen de gérer le téléchargement qui comprend l'utilisation des deux champs personnalisés démontrés dans le HTML ci-dessus.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

58
2018-03-24 21:53



Un téléchargement AJAX est en effet possible avec XMLHttpRequest (). Pas d'iframe nécessaire. La progression du téléchargement peut être affichée.

Pour plus de détails, voir: Answer https://stackoverflow.com/a/4943774/873282 questionner Progression du téléchargement jQuery et téléchargement du fichier AJAX.


29
2018-04-02 13:21



  • Utilisez un iframe caché et définissez la cible de votre formulaire sur le nom de ce iframe. De cette façon, lorsque le formulaire est soumis, seul le iframe sera actualisé.
  • Avoir un gestionnaire d'événements enregistré pour l'événement de chargement iframe pour analyser la réponse.

Plus de détails sur mon article de blog: http://blog.manki.in/2011/08/ajax-fie-upload.html.


13
2017-08-07 04:31



Au cas où vous voulez le faire comme ça:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

que

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

pourrait être votre solution.


13
2017-09-17 14:40