javascript - link - jquery import js




Téléchargement de fichier jQuery Ajax (14)

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>

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.


Ajax ne prend pas en charge les téléchargements de fichiers, vous devez plutôt utiliser iframe


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.


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;
}

J'ai traité ces derniers dans un code simple. Vous pouvez télécharger une démo de travail à partir d' here

Pour votre cas, ceux-ci très possible. Je vais vous emmener étape par étape comment vous pouvez télécharger un fichier sur le serveur en utilisant AJAX jquery.

Tout d'abord, créons un fichier HTML pour ajouter l'élément de fichier de formulaire suivant, comme indiqué ci-dessous.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Deuxièmement, créez un fichier jquery.js et ajoutez le code suivant pour gérer la soumission de votre fichier au serveur

    $("#formContent").submit(function(e){
        e.preventDefault();

    var formdata = new FormData(this);

        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

Voilà, vous avez terminé. here


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";
}
?>

Pour obtenir toutes les entrées de votre formulaire, y compris le type = "fichier", vous devez utiliser l' objet FormData . vous serez en mesure de voir le contenu de formData dans le débogueur -> réseau -> en-têtes après avoir soumis le formulaire.

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});

Si vous voulez télécharger un fichier en utilisant AJAX, voici le code que vous pouvez utiliser pour le téléchargement de fichiers.

$(document).ready(function() {
    var options = { 
                beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json' 
        }; 
    $('body').delegate('#image','change', function(){
        $('#upload').ajaxForm(options).submit();        
    }); 
});     
function showRequest(formData, jqForm, options) { 
    $("#validation-errors").hide().empty();
    $("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
    if(response.success == false)
    {
        var arr = response.errors;
        $.each(arr, function(index, value)
        {
            if (value.length != 0)
            {
                $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
         $("#output").html("<img src='"+response.file+"' />");
         $("#output").css('display','block');
    }
}

Voici le code HTML pour télécharger le fichier

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
    <input type="file" name="image" id="image" /> 
</form>

Voici une idée à laquelle je pensais:

Have an iframe on page and have a referencer.

Avoir un formulaire dans lequel vous déplacez l'élément INPUT: File à.

Form:  A processing page AND a target of the FRAME.

Le résultat s'affichera dans le cadre, puis vous pourrez simplement envoyer les données extraites vers le tag d'image souhaité avec quelque chose comme:

data:image/png;base64,asdfasdfasdfasdfa

et la page se charge.

Je crois que cela fonctionne pour moi, et selon que vous pourriez être en mesure de faire quelque chose comme:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});

Vous pouvez utiliser la méthode ajaxSubmit comme suit :) lorsque vous sélectionnez un fichier qui doit être téléchargé sur le serveur, le formulaire doit être envoyé au serveur :)

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};

$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});

pour télécharger un fichier qui est soumis par l'utilisateur comme une partie du formulaire en utilisant jquery s'il vous plaît suivez le code ci-dessous:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

Ensuite, envoyez l'objet de données de formulaire au serveur.

Nous pouvons également ajouter un fichier ou un blob directement à l'objet FormData.

data.append("myfile", myBlob, "filename.txt");

                 var dataform = new FormData($("#myform")[0]);

                    //console.log(dataform);
                     $.ajax({
                        url: 'url',
                        type: 'POST',
                        data: dataform,
                        async: false,
                        success: function (res) {
                            response data;
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });

<html>
    <head>
        <title>Ajax file upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>

  • 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 .







file-upload