私は同じ問題を探していると私は思う、私は、FirefoxとChromeのために働くだろうと上記のIE 10と上にあってもよい解決策、（ここで私はいくつかのmorrがテストを必要とする）
解決策を発見しました私はフレームセットを使うので少し醜いです。しかしこれは私が今までに見つけた唯一の解決策です。
使用例： 私たちは製品カタログを持つウェブサイトを持っており、エディタは各製品のビデオをアップロードできます。
動画のアップロードには長い時間がかかるため、動画を選択した後にアップロードを開始し、他の製品に移動して他のファイルをアップロードすることができます最初のダウンロードが完了します。どのように動作する
https://stackoverflow.com/a/1186309/2248340 https://stackoverflow.com/a/105074/2248340
：
テストは、いくつかの他の作業に基づいています
あなたが提出押すと、あなたがデータを構成するすべてのオブジェクトに配置されます。このオブジェクトでは、選択されたファイルリストでもあります。
このオブジェクトはアップロードフレーム内の配列要求をプッシュします。
ここでウォッチドッグが実行され、新しいリクエスト（ステータス= 0）があるかどうかを確認します。 新しいアップロードが開始されていることが検出された場合。
フレームセット：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="*,100">
<frame id="start" name="start" src="start.html">
<frame id="upload" name="upload" src="frame.html">
</frameset>
<noframes>
<body>
<a href="start.html">please use this</a>
</body>
</noframes>
</html>
start.htmlここ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Start</title>
<script src="../js/jquery-1.11.3.min.js" ></script>
<script>
var files;
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var UploadRequest=function(f)
{
var o= {};
o['guid']=guid();
o['action']=$('form').attr('action');
o['files']=files;
o['values']=$('form').serializeObject();
o['status']=0;
return o;
}
function fileSelect(e){
files=e.target.files;
return false;
}
</script>
</head>
<body>
<form id="test" action="phpinfo.php">
<input name="test" >
<input type="hidden" name="h1" value="2">
<input type="file" name="uploadfile" onchange="fileSelect(event)">
<input type="submit" value="upload‚" >
</form>
<script>
var olddogcounter=localStorage['uploadwatchdog'];
var check=false;
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
$(function() {
$('#test').submit(function() {
var request=new UploadRequest();
parent.upload.requests.push(request);
return false;
});
});
</script>
<a href="test.html" >test</a>
</body>
</html>
とアップロードのフレーム：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<h1>frame</h1>
<iframe id="response" width="100%" height="200"></iframe>
<script>
var requests=new Array();
var counter=0;
function watchdog()
{
for(var i=0; i<requests.length; i++)
{
var request=requests[i];
if(request.status==0)
{
alert("watchdog :"+dump(request));
request.status=1;
uploadFile(request);
}
}
}
function uploadFile(request)
{
var url = request.action;
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
iframe=document.getElementById("response");
iframe.src="data:text/html;charset=utf-8," + escape(xhr.responseText);
}
};
if(request.files.length>1)
{
for(var i=0; i<request.files.length;i++)
{
var file=request.files[i];
fd.append("upload_file[]", file);
}
}
else
{
var file=request.files[0];
fd.append("upload_file",file);
}
for(var key in request.values)
{
fd.append(key,request.values[key]);
}
xhr.send(fd);
}
window.setInterval(watchdog,2000);
</script>
</body>
</html>
ここ
はそれをしようとする私のテストプロジェクトです解決策は完全ではありませんが、私は良い出発点だと思う。
TODO： - リスト でのアップロードの表示名 - アップロード に対してshow progessバー - - 配列からのアップロードの削除要求の後は を要求し、いくつかのエラー処理