Javascript Girl
  1. Javascript Girl
  3. Comment télécharger un fichier via Jquery / AJAX
Intereting Posts
Javascript Comment puis-je appeler des fonctions à partir d'un tableau de noms de fonctions Utilisez la bibliothèque ES6 dans le projet Ember-cli Champ d'en-tête de demande Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers Comment exclure certaines propriétés de Knockoutjs toJS () Problèmes avec Date () lors de l'utilisation de JSON.stringify () et JSON.parse () Redux-form – Soumettre uniquement le champ édité Comment puis-je passer la portée du contrôleur au service dans angularjs? Existe-t-il un moyen d'intégrer toutes les méthodes JavaScript avec une fonction? Comprendre l'héritage prototypique en JavaScript Mocha pass variable au test suivant Google Map – Emplacement actuel Comment obtenir un HTML entièrement calculé (au lieu de HTML source)? Pourquoi jquery renverrait-il 0 pour un offsetHeight quand Firebug dit que c'est 34? Clôtures de Javascript – question de portée variable Comment trier un tableau JavaScript d'objets par une propriété d'objet imbriquée?

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

Je lance 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 souhaite ajouter la possibilité de télécharger une image sous la même forme et la mettre en œuvre 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 passe pas la variable $ _FILES dans 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?

Essayez d'utiliser cela. 

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