web-dev-qa-db-fra.com

Comment télécharger un fichier via Jquery / AJAX

J'AFFICHE actuellement mon formulaire via AJAX avec le code suivant:

$(document).ready(function(){
    $("form#createForm").submit(function() { // loginForm is submitted
        $("form#createForm input#createForm_submit").attr('disabled','disabled');

        tinyMCE.triggerSave();

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "perform", // URL of the Perl script
            data: $("#createForm").serialize(),

            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){

                $('div.form-group').each(function(){
                    $(this).removeClass('has-error');
                });

                if (data.error) { // script returned error
                    var myList = $('ul.msg-list').empty();

                    $.each(data.msg, function(key,item) {
                        $("div."+key).addClass('has-error');
                        $('<li>').text(item.errtxt).appendTo(myList);
                    });


                    $('div#create_createresult').html('some error').html(myList);
                    $('div#create_createresult').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr('disabled');
                } // if
                else 
                { // login was successful
                    //$('form#login_loginform').hide();
                    $('div#create_createresult').text(data.msg);
                    $('div#create_createresult').addClass("success");

                } //else
            } // success
        }); // ajax
        $('div#login_loginresult').fadeIn();
        return false;
    });
});

Maintenant, je veux ajouter la possibilité de télécharger une image sous la même forme et l'implémenter simplement dans ce JQUERY et dans le même script côté serveur. Mon seul problème est que je ne sais pas comment le faire. J'ai testé ce qui précède et je trouve qu'il ne transmet pas la variable $ _FILES à mon script côté serveur.

Quelqu'un peut-il me conduire dans n'importe quelle direction, ce que je dois faire, pour ajouter la possibilité de télécharger des images avec ce script?

javascriptphpjqueryajaxfile-upload
17
denlau

essayez de l'utiliser.

// grab your file object from a file input
$('#fileInput').change(function () {
  sendFile(this.files[0]);
});

// can also be from a drag-from-desktop drop
$('dropZone')[0].ondrop = function (e) {
  e.preventDefault();
  sendFile(e.dataTransfer.files[0]);
};

function sendFile(file) {
  $.ajax({
    type: 'post',
    url: '/targeturl?name=' + file.name,
    data: file,
    success: function () {
      // do something
    },
    xhrFields: {
      // add listener to XMLHTTPRequest object directly for progress (jquery doesn't have this yet)
      onprogress: function (progress) {
        // calculate upload progress
        var percentage = Math.floor((progress.total / progress.totalSize) * 100);
        // log upload progress to console
        console.log('progress', percentage);
        if (percentage === 100) {
          console.log('DONE!');
        }
      }
    },
    processData: false,
    contentType: file.type
  });
}
25
ruin3936