如何确定 XMLHttpRequest.send() 是否有效

2022-01-15 00:00:00 xmlhttprequest javascript

我正在使用 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 返回 success/failure 消息来做到这一点,将 success/failed 消息 作为 json 并从 django 视图 发回序列化的 json.为此,我制作了 xhr.open() non-asynchronous.我试图打印 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 对象包含 statusreadyState 属性,您可以在 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.

相关文章