如何找出XMLHttpRequest.send（）是否有效 [英] how to find out if XMLHttpRequest.send() worked

问题描述

我正在使用 XMLHttpRequest 将文件从 javascript 代码发送到 django视图。我需要检测文件是否已发送或是否发生了一些错误。我使用jquery编写以下javascript。

I am using XMLHttpRequest to send a file from javascript code to a django view.I need to detect,whether the file has been sent or if some error occurred.I used jquery to write the following javascript.

理想情况下我想向用户显示该文件未上传的错误消息。是否有某种方法可以在 javascript 中执行此操作？

Ideally I would like to show the user an error message that the file was not uploaded.Is there some way to do this in javascript?

我尝试通过从 django view 返回成功/失败消息来执行此操作，将成功/失败消息 as json 并从 django视图发回序列化的json 。为此，我做了 xhr.open（） 非异步。我试图打印 xmlhttpRequest 对象的 responseText 。 console.log（xhr.responseText） 显示

I tried to do this by returning a success/failure message from django view , putting the success/failed message as json and sending back the serialized json from the django view.For this,I made the xhr.open() non-asynchronous. I tried to print the xmlhttpRequest object's responseText .The console.log(xhr.responseText) shows

response= {"message": "success"}

我想知道的是，这是否是正确的方法。在很多文章中，我发现了警告

What I am wondering is,whether this is the proper way to do this.In many articles,I found the warning that

不建议使用async = false

Using async=false is not recommended

所以，有没有办法找出文件是否已被发送，同时保持 xhr.open（）异步？

So,is there any way to find out whether the file has been sent,while keeping xhr.open() asynchronous?

$(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);
}

我的 django 视图从表单数据中提取文件并写入目标文件夹。

My django view extracts file from form data and writes to a destination folder.

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")

编辑：

我在@Fabrí的帮助下完成了这项工作cioMatté

I got this working with the help of @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');
          }
       }
    }

推荐答案

XMLHttpRequest 对象包含状态和 readyState 属性，您可以在 xhr.onreadystatechange 事件中测试，以检查您的请求是否成功。

XMLHttpRequest objects contain the status and readyState properties, which you can test in the xhr.onreadystatechange event to check if your request was successful.

这篇关于如何找出XMLHttpRequest.send（）是否有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！