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