87,922
社区成员
发帖
与我相关
我的任务
分享IE9、Chrome23在上传大文件的同时显示进度的差异
小弟在项目过程中碰到一个郁闷的问题，特此求教。
是嵌入式项目，所以资源有限，不能用php，jquery等library。所以小弟通过表单及ajax实现文件上传及进度显示。相同的代码，IE9工作的很好。有问题的是chrome：在没有文件上传时，进度可以更新（测试），而有文件上传时，javascript的XMLHTTPRequest总是超时，跟踪Server端，发现根本就没有progress的进度页面请求。小弟是没辙了。附上代码：
这是表单页面：
progress.js:
http.js:
progress.xml格式：
在线等
是嵌入式项目，所以资源有限，不能用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" />
在线等
...全文
请发表友善的回复…
发表回复
carylin 2012-11-20
- 打赏
- 举报
我的意思，就是使用隐藏iframe方式提交表单时， firefox16会打开新窗口。
不过这也可以接受了。
非常感谢版主回复。
结贴
Go 旅城通票 2012-11-19
- 打赏
- 举报
firefox16....应该是配置的问题吧。一般提交表单到隐藏iframe不会打开新窗口的，没用过firefox16，你就做个简单demo，将表单提交到隐藏iframe看看是否会打开新窗口了
carylin 2012-11-19
- 打赏
- 举报
数据提交工作是浏览器做的。当点击提交按钮时，浏览器再开个TCP链接（我使用了非持久连接选项），向服务器发送表单数据流。所以服务器这边只要监视新进入的TCP连接请求并进行相应的数据接收与处理即可。
使用iframe方式chrome也可以了。
但是firefox16引入了一个新问题：点击提交时，会新开一个页面，导致查看进度条的话还得点选前一个页面。不知版主用什么方式处理这个问题？
不过这样也基本可以接受。
Go 旅城通票 2012-11-15
- 打赏
- 举报
你提交之后页面就跳转了吧。。还怎么执行ajax？
将表单提交到隐藏的iframe中试试看
<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>
Go 旅城通票 2012-11-15
- 打赏
- 举报
那你怎么提交数据的？没有页面怎么接受数据，即使是重写的页面也有处理程序吧。
你按照我的改下，提交到隐藏iframe中，这样当前页面就不会跳转了
carylin 2012-11-15
- 打赏
- 举报
非常感谢版主回复。小弟对web这块不熟。
忘记说了，我的服务器是自己用C++写的，写得很简陋。表单提交到'/bin.cgi'页面，其实是不存在这个页面的。我只是用socket接收表单（浏览器）上传的数据。因为上传的文件很大，所以用户会等很久，才需要加个进度显示。所以，不存在你说的页面跳转的问题。
另外，最新测试结果是，IE9及Firefox16运行结果正常，chrome失败。
