2012-07-30 67 views
0

我知道这一种听起来很愚蠢......它应该在那里工作......但:新的XMLHttpRequest()在Chrome不起作用?

function fetch(id){ 
    var fetch = new XMLHttpRequest(); 
    fetch.open("GET", "/upload/status?X-Progress-ID=" + id); 
    fetch.onreadystatechange = function() { 
     console.log(fetch.readyState); 
    } 
    fetch.send(null); 
} 

此代码在IE,Firefox中......我得到的所有4个状态返回......但是当我尝试在铬我得到绝对没有...我绝对不知道为什么...

我想你已经猜到了这个问题,为什么它不工作?

编辑

改变了代码一点点......如你也许已经猜到了,我nginx的上传进度模块工作,并调用该函数everysecond获得上传的进度文件...

编辑1

嗯,我试图重写的东西$。阿贾克斯(),我基本上得到了相同的结果.. IE,火狐的作品,和铬只是给我什么。下面是页面的全码:

<!doctype html> 
<html lang="ru"> 
<head> 
    <meta charset="utf-8"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <script src="static/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> 
    <script> 
    function add() { 
     if (parseInt(document.getElementById('count').getAttribute('value')) < 8) { 
     var input = document.createElement('input'); 
     input.setAttribute('type','file'); 
     input.setAttribute('multiple',''); 
     input.setAttribute('name','file[]'); 
     document.getElementById('multiple').appendChild(input); 
     document.getElementById('multiple').appendChild(document.createElement('br')); 
     document.getElementById('count').setAttribute('value',parseInt(document.getElementById('count').getAttribute('value'))+1); 
     } 
     else { 
     alert('Можно загрузить не более 8 файлов за раз.'); 
     } 
    } 
    function progress() { 
     var ms = new Date().getTime()/1000; 
     rq = 0; 
     id = ""; 
     for (i = 0; i < 32; i++) { 
     id += Math.floor(Math.random() * 16).toString(16); 
     } 
     document.getElementById('upload').action = "/upload/share?X-Progress-ID=" + id; 
//  console.log("/upload/share?X-Progress-ID=" + id); 
     document.getElementById('status').style.display = 'block' 
     interval = window.setInterval(function() { fetch(id, ms); }, 1000); 
     return true; 
    } 
    function fetch(id, ms) { 
//  console.log("/upload/status?X-Progress-ID=" + id); 


     $.ajax({ 
     type: "GET", 
     url: "/upload/status?X-Progress-ID="+id, 
     dataType: 'text', 
     complete: function(upload) { 
      console.log('test'); 
      alert('test'); 
     } 
     }); 

//  var fetch = new XMLHttpRequest(); 
//  fetch.open("GET", "/upload/status", 1); 
//  fetch.setRequestHeader("X-Progress-ID", id); 
//  fetch.open("GET", "/upload/status?X-Progress-ID=" + id); 
//  fetch.setRequestHeader("X-Progress-ID", id); 

//  fetch.onreadystatechange = function() { 
//  console.log('rorororo'); 
//  console.log(fetch.readyState); 
//  if (fetch.readyState == 3) { 
//   console.log(fetch.responseText); 
// 
////   if (fetch.status == 200) { 
// 
//   var now = new Date().getTime()/1000; 
//   var upload = eval(fetch.responseText); 
// 
//   if (upload.state == 'uploading') { 
//    var diff = upload.size - upload.received; 
//    var rate = upload.received/upload.size; 
//    var elapsed = now - ms; 
//    var speed = upload.received - rq; rq = upload.received; 
//    var remaining = (upload.size - upload.received)/speed; 
//    var uReceived = parseInt(upload.received) + ' bytes'; 
//    var uDiff = parseInt(diff) + ' bytes'; 
//    var tTotal = parseInt(elapsed + remaining) + ' secs'; 
//    var tElapsed = parseInt(elapsed) + ' secs'; 
//    var tRemaining = parseInt(remaining) + ' secs'; 
//    var percent = Math.round(100*rate) + '%'; 
//    var uSpeed = speed + ' bytes/sec'; 
//    document.getElementById('length').firstChild.nodeValue = parseInt(upload.size) + ' bytes'; 
//    document.getElementById('sent').firstChild.nodeValue = uReceived; 
//    document.getElementById('offset').firstChild.nodeValue = uDiff; 
//    document.getElementById('total').firstChild.nodeValue = tTotal; 
//    document.getElementById('elapsed').firstChild.nodeValue = tElapsed; 
//    document.getElementById('remaining').firstChild.nodeValue = tRemaining; 
//    document.getElementById('speed').firstChild.nodeValue = uSpeed; 
//    document.getElementById('bar').firstChild.nodeValue = percent; 
//    document.getElementById('bar').style.width = percent 
//   } 
//   else { 
//    window.clearTimeout(interval); 
//   } 
////   } 
//  } 

//  } 
//  fetch.send(null); 
    } 
    </script> 
</head> 
<body> 
<form method="post" enctype="multipart/form-data" id="upload" onsubmit="progress();"> 
    <input type="hidden" id="count" value="1" /> 
    <input type="hidden" value="GOBLEBOELBOE" name="secret"> 
    <div id="multiple"> 
    <input type="file" name="file[]" multiple /><br> 
    </div> 
    <input type="submit"> 
    <a href="#" onclick="add();">add();</a> 
</form> 
<div id="status" style="display: none;"> 
    <table width="100%"> 
    <tr><th></th><th>загрузка</th><th>осталось</th><th>всего</th></tr> 
    <tr><td>время:</td><td id="elapsed">∞</td><td id="remaining">∞</td><td id="total">∞</td></tr> 
    <tr><td>размер:</td><td id="sent">0 b</td><td id="offset">0 b</td><td id="length">0 b</td></tr> 
    <tr><td>скорость:</td><td id="speed">n/a</td></tr> 
    </table> 
    <div style="border: 1px solid #c0c0c0;"> 
    <div style="background: #c0c0c0; width: 0%; text-align: right;" id="bar">0%</div> 
    </div> 
    <a href="#" onclick="if (confirm('Вы точно хотите отменить загрузку?')) window.location = '/'" id="cancel">cancel_upload();</a> 
</div> 
</body> 
</html> 

答:http://code.google.com/p/chromium/issues/detail?id=45196

回答

0

你应该添加此

fetch.send(null) 

的open()

初始化请求。这个方法是从JavaScript代码中使用的;要从本地代码初始化请求,请改为使用openRequest()。

send()

发送请求。如果该请求是异步的(这是默认值),这种方法一旦请求被发送返回。如果请求是同步的,那么直到响应已到达,此方法才会返回。

MDN

+0

它的存在......抱歉,没有把我的代码... – Viktor 2012-07-30 12:06:13

+0

是否有在控制台的任何异常。 – xiaowl 2012-07-30 12:11:02

+0

看我编辑的代码有点...不,绝对不会有例外......这是最主要的问题..它是不是在所有叫....因为如果我在这里CONSOLE.LOG一些随机字符串'fetch.onreadystatechange = function(){}',它绝对没有打印.... – Viktor 2012-07-30 12:12:20