小弟在项目过程中碰到一个郁闷的问题,特此求教。
是嵌入式项目,所以资源有限,不能用php,jquery等library。所以小弟通过表单及ajax实现文件上传及进度显示。相同的代码,IE9工作的很好。有问题的是chrome:在没有文件上传时,进度可以更新(测试),而有文件上传时,javascript的XMLHTTPRequest总是超时,跟踪Server端,发现根本就没有progress的进度页面请求。小弟是没辙了。附上代码:这是表单页面:<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Upload File</title><script type="text/javascript" src="./scripts/http.js" />
<script type="text/javascript" src="./scripts/progress.js" /></head>
<body>
<form action="/bin.cgi" enctype="multipart/form-data" method="post">
<p>
Please specify a binary file to upload into flash:<br /> <input
type="file" name="datafile" size="40" value="default.bin"
accept=".bin" />
</p>
<div>
<input type="submit" value="Upload" />
</div>
</form>
<input type="button" onclick="javascript:showProgress();"
value="Show Progress" id="showProgressBtn" />
<div id="progressDiv" />
</body>
</html>
progress.js:function showProgress() {
var callback = function(resp) {
if (resp == null) {
alert('error occurred.');
return;
} var valueElems = resp.getElementsByTagName('progress');
if (valueElems.length != 1) {
return;
} var v = parseInt(valueElems[0].getAttribute('value'));
var progs = document.getElementsByTagName('progress');
if (progs.length == 0) {
var progDiv = document.getElementById('progressDiv');
var e = document.createElement('progress');
e.max = '100';
e.value = v + '';
e.appendChild(document.createTextNode(v + ''));
progDiv.appendChild(e);
} else {
progs[0].value = v + '';
progs[0].childNodes[0].nodeValue = v + '';
} setTimeout(function() {
showProgress();
}, 2000);
}; var options = {};
options.timeout = 2000;
options.timeoutHandler = function(url) {
alert('request ' + url + ' timeout');
}; HTTP.get('/progress.php', callback, options);
}function enableShowProgressBtn() {
document.getElementById('showProgressBtn').removeAttribute('disabled');
}
http.js:var HTTP = {};HTTP._factories = [ function() {
return new XMLHttpRequest();
}, function() {
return new ActiveXObject('Msxml2.XMLHTTP');
}, function() {
return new ActiveXObject('Microsoft.XMLHTTP');
} ];HTTP._factory = null;HTTP.newRequest = function() {
if (HTTP._factory != null)
return HTTP._factory(); for ( var i = 0; i < HTTP._factories.length; i++) {
try {
var factory = HTTP._factories[i];
var request = factory();
if (request != null) {
HTTP._factory = factory;
return request;
}
} catch (e) {
continue;
}
}
HTTP._factory = function() {
throw new Error('XMLHttpRequest not supported');
};
HTTP._factory();
};HTTP._getResponse = function(request) {
switch (request.getResponseHeader('Content-Type')) {
case 'text/xml':
case 'application/xml':
return request.responseXML; case 'text/json':
case 'text/javascript':
case 'application/javascript':
case 'application/x-javascript':
return eval(request.responseText); default:
return request.responseText;
}
};HTTP.get = function(url, callback, options) {
var request = HTTP.newRequest();
var n = 0;
var timer = null;
if (options.timeout)
timer = setTimeout(function() {
request.abort();
if (options.timeoutHandler)
options.timeoutHandler(url);
}, options.timeout); request.onreadystatechange = function() {
if (request.readyState == 4) {
if (timer)
clearTimeout(timer);
if (request.status == 200) {
callback(HTTP._getResponse(request));
} else {
if (options.errorHandler)
options.errorHandler(request.status, request.statusText);
else
callback(null);
}
} else if (options.progressHandler) {
options.progressHandler(++n);
}
}; var target = url;
if (options.parameters)
target += '?' + HTTP.encodeFormData(options.parameters);
request.open('GET', target);
request.send(null);
};progress.xml格式:<?xml version="1.0" encoding="UTF-8"?>
<progress value="20" max="100" />
在线等
是嵌入式项目,所以资源有限,不能用php,jquery等library。所以小弟通过表单及ajax实现文件上传及进度显示。相同的代码,IE9工作的很好。有问题的是chrome:在没有文件上传时,进度可以更新(测试),而有文件上传时,javascript的XMLHTTPRequest总是超时,跟踪Server端,发现根本就没有progress的进度页面请求。小弟是没辙了。附上代码:这是表单页面:<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Upload File</title><script type="text/javascript" src="./scripts/http.js" />
<script type="text/javascript" src="./scripts/progress.js" /></head>
<body>
<form action="/bin.cgi" enctype="multipart/form-data" method="post">
<p>
Please specify a binary file to upload into flash:<br /> <input
type="file" name="datafile" size="40" value="default.bin"
accept=".bin" />
</p>
<div>
<input type="submit" value="Upload" />
</div>
</form>
<input type="button" onclick="javascript:showProgress();"
value="Show Progress" id="showProgressBtn" />
<div id="progressDiv" />
</body>
</html>
progress.js:function showProgress() {
var callback = function(resp) {
if (resp == null) {
alert('error occurred.');
return;
} var valueElems = resp.getElementsByTagName('progress');
if (valueElems.length != 1) {
return;
} var v = parseInt(valueElems[0].getAttribute('value'));
var progs = document.getElementsByTagName('progress');
if (progs.length == 0) {
var progDiv = document.getElementById('progressDiv');
var e = document.createElement('progress');
e.max = '100';
e.value = v + '';
e.appendChild(document.createTextNode(v + ''));
progDiv.appendChild(e);
} else {
progs[0].value = v + '';
progs[0].childNodes[0].nodeValue = v + '';
} setTimeout(function() {
showProgress();
}, 2000);
}; var options = {};
options.timeout = 2000;
options.timeoutHandler = function(url) {
alert('request ' + url + ' timeout');
}; HTTP.get('/progress.php', callback, options);
}function enableShowProgressBtn() {
document.getElementById('showProgressBtn').removeAttribute('disabled');
}
http.js:var HTTP = {};HTTP._factories = [ function() {
return new XMLHttpRequest();
}, function() {
return new ActiveXObject('Msxml2.XMLHTTP');
}, function() {
return new ActiveXObject('Microsoft.XMLHTTP');
} ];HTTP._factory = null;HTTP.newRequest = function() {
if (HTTP._factory != null)
return HTTP._factory(); for ( var i = 0; i < HTTP._factories.length; i++) {
try {
var factory = HTTP._factories[i];
var request = factory();
if (request != null) {
HTTP._factory = factory;
return request;
}
} catch (e) {
continue;
}
}
HTTP._factory = function() {
throw new Error('XMLHttpRequest not supported');
};
HTTP._factory();
};HTTP._getResponse = function(request) {
switch (request.getResponseHeader('Content-Type')) {
case 'text/xml':
case 'application/xml':
return request.responseXML; case 'text/json':
case 'text/javascript':
case 'application/javascript':
case 'application/x-javascript':
return eval(request.responseText); default:
return request.responseText;
}
};HTTP.get = function(url, callback, options) {
var request = HTTP.newRequest();
var n = 0;
var timer = null;
if (options.timeout)
timer = setTimeout(function() {
request.abort();
if (options.timeoutHandler)
options.timeoutHandler(url);
}, options.timeout); request.onreadystatechange = function() {
if (request.readyState == 4) {
if (timer)
clearTimeout(timer);
if (request.status == 200) {
callback(HTTP._getResponse(request));
} else {
if (options.errorHandler)
options.errorHandler(request.status, request.statusText);
else
callback(null);
}
} else if (options.progressHandler) {
options.progressHandler(++n);
}
}; var target = url;
if (options.parameters)
target += '?' + HTTP.encodeFormData(options.parameters);
request.open('GET', target);
request.send(null);
};progress.xml格式:<?xml version="1.0" encoding="UTF-8"?>
<progress value="20" max="100" />
在线等
<iframe name="ajaxifr" style="display:none"></iframe>
<form action="/bin.cgi" enctype="multipart/form-data" method="post" target="ajaxifr">
<p>
Please specify a binary file to upload into flash:<br /> <input
type="file" name="datafile" size="40" value="default.bin"
accept=".bin" />
</p>
<div>
<input type="submit" value="Upload" onclick="showProgress();" />
</div>
</form>
那你怎么提交数据的?没有页面怎么接受数据,即使是重写的页面也有处理程序吧。你按照我的改下,提交到隐藏iframe中,这样当前页面就不会跳转了
不过这也可以接受了。非常感谢版主回复。
结贴