Comment savoir si XMLHttpRequest.send () a fonctionné

J'utilise XMLHttpRequest pour envoyer un fichier du code javascript à une django view Je dois détecter si le fichier a été envoyé ou si une erreur est survenue. J'ai utilisé jquery pour écrire le javascript suivant.

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

J'ai essayé de le faire en renvoyant un message de success/failure de la django view de django view , en mettant le success/failed message tant que json et en renvoyant le json sérialisé depuis la django view . Pour cela, j'ai créé le xhr.open() non-asynchronous . J'ai essayé d'imprimer le xmlhttpRequest objet console.log(xhr.responseText) . La console.log(xhr.responseText) montre

 response= {"message": "success"} 

Ce que je me demande, c'est que ce soit le bon moyen de le faire. Dans de nombreux articles, j'ai trouvé l'avertissement que

• Exécuter une fonction Javascript pour un WebView à partir d'un programme JavaFX
• Twitter bootstrap stop propagation on dropdown open
• Type de valeur Type de référence objet en javascript
• Comment jouer à wav audio byte array via javascript / html5?
• Prototype JavaScript 'this' problème

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

Alors, est-il possible de savoir si le fichier a été envoyé, tout en maintenant 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 de formulaire et les é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") 

MODIFIER:

J'ai travaillé 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'); } } } 

• Comment extraire des nombres flottants à partir de chaînes dans javascript
• HTML5 et Javascript pour lire des vidéos uniquement lorsqu'ils sont visibles
• Comment obtenir l'appelant en mode strict?
• Async.js – Le parallèle est-il vraiment parallèle?
• Comment afficher les détails de l'événement sur le clic du jour dans le calendrier complet

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