web-dev-qa-db-fra.com

comment savoir si XMLHttpRequest.send () a fonctionné

J'utilise XMLHttpRequest pour envoyer un fichier du code javascript vers un Django view. J'ai besoin de détecter si le fichier a été envoyé ou si une erreur s'est produite. jquery pour écrire le javascript suivant.

Idéalement, je voudrais montrer à l'utilisateur un message d'erreur indiquant que le fichier n'a pas été téléchargé. Y a-t-il un moyen de le faire dans javascript?

J'ai essayé de le faire en renvoyant un message success/failure de Django view, en mettant le success/failed message en json et en renvoyant le json sérialisé à partir du Django view. Pour cela, j'ai fait le xhr.open()non-asynchronous. J'ai essayé d'imprimer le xmlhttpRequest objet responseText. Le console.log(xhr.responseText) montre

response= {"message": "success"}

Ce que je me demande, c'est si c'est la bonne façon de le faire. Dans de nombreux articles, j'ai trouvé l'avertissement que

L'utilisation de async = false n'est pas recommandée

Alors, existe-t-il un moyen de savoir si le fichier a été envoyé, tout en gardant xhr.open() asynchrone?

$(document).ready(function(){
   $(document).on('change', '#fselect', function(e){
            e.preventDefault();
            sendFile();
        });
});

function sendFile(){
   var form = $('#fileform').get(0);
   var formData = new FormData(form);
   var file = $('#fselect').get(0).files[0];
   var xhr = new XMLHttpRequest();
   formData.append('myfile', file);
   xhr.open('POST', 'uploadfile/', false);
   xhr.send(formData);
   console.log('response=',xhr.responseText);
}

Ma vue Django extrait le fichier des données du formulaire et écrit dans un dossier de destination.

def store_uploaded_file(request):
   message='failed'
   to_return = {}
   if  (request.method == 'POST'):          
      if request.FILES.has_key('myfile'):
         file = request.FILES['myfile']
         with open('/uploadpath/%s' % file.name, 'wb+') as dest:
            for chunk in file.chunks():
               dest.write(chunk)
               message="success"
   to_return['message']= message
   serialized = simplejson.dumps(to_return)
   if store_message == "success":
      return HttpResponse(serialized, mimetype="application/json")
   else:
      return HttpResponseServerError(serialized, mimetype="application/json")

ÉDITER:

Je l'ai fait travailler avec l'aide de @ FabrícioMatté

xhr.onreadystatechange=function(){
       if (xhr.readyState==4 && xhr.status==200){
          console.log('xhr.readyState=',xhr.readyState);
          console.log('xhr.status=',xhr.status);
          console.log('response=',xhr.responseText);

          var data = $.parseJSON(xhr.responseText);
          var uploadResult = data['message']
          console.log('uploadResult=',uploadResult);

          if (uploadResult=='failure'){
             console.log('failed to upload file');
             displayError('failed to upload');
          }else if (uploadResult=='success'){
             console.log('successfully uploaded file');
          }
       }
    }
javascriptxmlhttprequest
23
damon

Les objets XMLHttpRequest contiennent les propriétés status et readyState, que vous pouvez tester dans les xhr.onreadystatechange événement pour vérifier si votre demande a abouti.

16
Fabrício Matté

Quelque chose comme le code suivant devrait faire le travail:

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState === 4) {
        var response = JSON.parse(xmlhttp.responseText);
          if (xmlhttp.status === 200 && xmlhttp.status === 'OK') {
             console.log('successful');
          } else {
             console.log('failed');
          }
      }
    }
20
Nima

XMLHttpRequest permet d'écouter divers événements qui peuvent se produire pendant le traitement de la demande. Cela inclut les notifications de progression périodiques, les notifications d'erreur, etc.

Alors:

function sendFile() {
   var form = $('#fileform').get(0);
   var formData = new FormData(form);
   var file = $('#fselect').get(0).files[0]
   var xhr = new XMLHttpRequest();
   formData.append('myfile', file);
   xhr.open('POST', 'uploadfile/', false);
   xhr.addEventListener("load", transferComplete);
   xhr.addEventListener("error", transferFailed);
  }

    function transferComplete(evt) {
        console.log("The transfer is complete.");
        // Do something
    }

    function transferFailed(evt) {
        console.log("An error occurred while transferring the file.");
        // Do something
    }

Vous pouvez en savoir plus sur sing XMLHttpRequest .

0
lwairore