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

Javascript 如何确定XMLHttpRequest.send()是否有效,javascript,xmlhttprequest,Javascript,Xmlhttprequest,我正在使用XMLHttpRequest将文件从javascriptcode发送到django视图。我需要检测文件是否已发送或是否发生错误。我使用jquery编写了以下javascript 理想情况下,我希望向用户显示文件未上载的错误消息。在javascript中有什么方法可以做到这一点吗 我试图通过从django视图返回一条success/failure消息,将success/failed消息作为json并从django视图发回序列化的json来实现这一点。为此,我将xhr.open()设置为非

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

理想情况下,我希望向用户显示文件未上载的错误消息。在
javascript
中有什么方法可以做到这一点吗

我试图通过从
django视图
返回一条
success/failure
消息,将
success/failed消息
作为
json
并从
django视图
发回序列化的json来实现这一点。为此,我将
xhr.open()
设置为非异步的
。我试图打印
xmlhttpRequest
对象的
responseText
console.log(xhr.responseText)
显示

response= {"message": "success"}
我想知道的是,这是否是正确的方法

不建议使用async=false

那么,在保持
xhr.open()

$(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);
}
My
django
视图从表单数据提取文件并写入目标文件夹

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")
编辑:

我在@Fabricio Matté的帮助下完成了这项工作

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
对象包含
status
readyState
属性,您可以在
xhr.onreadystatechange
事件中测试这些属性,以检查请求是否成功

类似于以下代码的代码应该可以完成这项工作:

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

XMLHttpRequest
提供了监听请求处理过程中可能发生的各种事件的功能。这包括定期进度通知、错误通知等

因此:


您可以阅读更多信息。

xhr.readyState==4&&xhr.status==200
还不够吗?请原谅我的无知,如果django视图中的文件写入失败并且出现服务器错误(500),我是否可以使用
xhr.readyState==4&&xhr.status==500来检测?如果
xhr
对象返回响应,它还应该包含
status
readyState
属性。尝试
console。记录
ing这些以确保谢谢@Fabrício Matté,我已经更新了这个问题,说明了我是如何做到这一点的。如果你能将上面的评论转化为回复,我可以接受。答案在最后用一段有效的代码片段更新。
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
    }