Javascript：在重定向之间持久化文件上载
由于这个问题没有答案： 我正在研究一种变通方法，允许用户在浏览其他页面时，在一个单独的弹出窗口中上载文件。这是我将我的Javascript：在重定向之间持久化文件上载,javascript,Javascript,由于这个问题没有答案： 我正在研究一种变通方法，允许用户在浏览其他页面时，在一个单独的弹出窗口中上载文件。这是我将我的文件对象传递到弹出窗口的方式： index.html: <ol id="chosenFilesList"></ol> <a href="javascript:void(0);" id="browseButton" style="cursor: pointer;">Select files</a> <br> <br
文件<ol id="chosenFilesList"></ol>
<a href="javascript:void(0);" id="browseButton" style="cursor: pointer;">Select files</a>
<br>
<br>
<br>
<a href="javascript:void(0);" id="uploadButton">Upload</a>
<script src="resumable.js"></script>
<script>
var fileArr = [];
function displaySelectedFiles() {
var fileList = '';
for (var i = 0; i < fileArr.length; i++)
if(fileArr[i])
fileList += '<li>' + fileArr[i].name + '</li><a style="cursor: pointer;" onclick="removeFile(' + fileArr[i] + ');">Remove</a>';
//localStorage.setItem('fileArr', fileArr);
document.getElementById('chosenFilesList').innerHTML = fileList;
}
var r = new Resumable({
target:'test.html'
});
r.assignBrowse(document.getElementById('browseButton'));
r.on('fileSuccess', function(file){
console.debug('fileSuccess',file);
});
r.on('fileProgress', function(file){
console.debug('fileProgress', file);
});
r.on('fileAdded', function(file, event){
//r.upload();
fileArr.push(file.file);
displaySelectedFiles();
console.debug('fileAdded', event);
});
r.on('filesAdded', function(array){
//r.upload();
displaySelectedFiles();
console.debug('filesAdded', array);
});
r.on('fileRetry', function(file){
console.debug(file);
});
r.on('fileError', function(file, message){
console.debug('fileError', file, message);
});
r.on('uploadStart', function(){
console.debug('uploadStart');
});
r.on('complete', function(){
console.debug('complete');
});
r.on('progress', function(){
console.debug('progress');
});
r.on('error', function(message, file){
console.debug('error', message, file);
});
r.on('pause', function(){
console.debug('pause');
});
r.on('cancel', function(){
console.debug('cancel');
});
var popupWindow;
var addFiles = function() {
for (var i = 0; i < fileArr.length; i++) {
if(fileArr[i])
popupWindow.r.addFile(fileArr[i]);
}
//popupWindow.startUpload();
window.location.reload();
setTimeout('popupWindow.focus()', 1);
};
document.getElementById('uploadButton').addEventListener('click', function(evt) {
popupWindow = window.windowPop('', 900, 500);
if(popupWindow.location.href.indexOf('test.html') === -1) {
popupWindow.location.href = 'test.html';
setTimeout(function(){
popupWindow.onload = addFiles;
addFiles();
}, 300);
} else {
addFiles();
}
});
function windowPop(url, width, height) {
var leftPosition, topPosition;
//Allow for borders.
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
//Allow for title and status bars.
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
//Open the window.
return window.open(url, "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Resumable.js - Multiple simultaneous, stable and resumable uploads via the HTML5 File API</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="frame">
<h3>Demo</h3>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="resumable.js"></script>
<div class="resumable-error">
Your browser, unfortunately, is not supported by Resumable.js. The library requires support for <a href="http://www.w3.org/TR/FileAPI/">the HTML5 File API</a> along with <a href="http://www.w3.org/TR/FileAPI/#normalization-of-params">file slicing</a>.
</div>
<div class="resumable-drop" ondragenter="jQuery(this).addClass('resumable-dragover');" ondragend="jQuery(this).removeClass('resumable-dragover');" ondrop="jQuery(this).removeClass('resumable-dragover');">
Drop video files here to upload or <a class="resumable-browse"><u>select from your computer</u></a>
</div>
<div class="resumable-progress">
<table>
<tr>
<td width="100%"><div class="progress-container"><div class="progress-bar"></div></div></td>
<td class="progress-text" nowrap="nowrap"></td>
<td class="progress-pause" nowrap="nowrap">
<a href="#" onclick="r.upload(); return(false);" class="progress-resume-link"><img src="resume.png" title="Resume upload" /></a>
<a href="#" onclick="r.pause(); return(false);" class="progress-pause-link"><img src="pause.png" title="Pause upload" /></a>
</td>
</tr>
</table>
</div>
<ul class="resumable-list"></ul>
<script>
var r = new Resumable({
target:'/java-example/upload',
chunkSize:1*1024*1024,
simultaneousUploads:4,
testChunks: true,
throttleProgressCallbacks:1,
method: "octet"
});
// Resumable.js isn't supported, fall back on a different method
if(!r.support) {
$('.resumable-error').show();
} else {
// Show a place for dropping/selecting files
$('.resumable-drop').show();
r.assignDrop($('.resumable-drop')[0]);
r.assignBrowse($('.resumable-browse')[0]);
// Handle file add event
r.on('fileAdded', function(file){
// Show progress pabr
$('.resumable-progress, .resumable-list').show();
// Show pause, hide resume
$('.resumable-progress .progress-resume-link').hide();
$('.resumable-progress .progress-pause-link').show();
// Add the file to the list
$('.resumable-list').append('<li class="resumable-file-'+file.uniqueIdentifier+'">Uploading <span class="resumable-file-name"></span> <span class="resumable-file-progress"></span>');
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-name').html(file.fileName);
// Actually start the upload
r.upload();
console.log(file);
});
r.on('pause', function(){
// Show resume, hide pause
$('.resumable-progress .progress-resume-link').show();
$('.resumable-progress .progress-pause-link').hide();
});
r.on('complete', function(){
// Hide pause/resume when the upload has completed
$('.resumable-progress .progress-resume-link, .resumable-progress .progress-pause-link').hide();
});
r.on('fileSuccess', function(file,message){
// Reflect that the file upload has completed
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(completed)');
});
r.on('fileError', function(file, message){
// Reflect that the file upload has resulted in error
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html('(file could not be uploaded: '+message+')');
});
r.on('fileProgress', function(file){
// Handle progress for both the file and the overall upload
$('.resumable-file-'+file.uniqueIdentifier+' .resumable-file-progress').html(Math.floor(file.progress()*100) + '%');
$('.progress-bar').css({width:Math.floor(r.progress()*100) + '%'});
});
}
</script>
</div>
</body>
</html>
var fileArr=[]；
函数displaySelectedFiles（）{
var fileList=''；
对于（变量i=0；i以及。
将视频文件放到此处以上载或删除
var r=新的可恢复性({
目标：'/java示例/upload'，
chunkSize:1*1024*1024，
同时上传：4，
测试块：是的，
throttleProgressCallbacks:1，
方法：“八隅体”
});
//Resumable.js不受支持，请使用其他方法
如果（！r.support）{
$（'.resubable error'）.show（）；
}否则{
//显示放置/选择文件的位置
$（'.resumable drop'）.show（）；
r、 分配下降（$（'可恢复下降'）[0]）；
r、 assignBrowse（$（'.resubable browse'）[0]）；
//处理文件添加事件
r、 打开（'fileAdded'，函数（文件）{
//显示进度pabr
$（'.resubable progress，.resubable list'）.show（）；
//显示暂停，隐藏恢复
$（'.resumable progress.progress resume link'）.hide（）；
$（'.resubable progress.progress pause link'）.show（）；
//将文件添加到列表中
$（'.resumable list'）.append（'upload'）；
$（'.resumable file-'+file.uniqueIdentifier+'.resumable file name'）.html（file.fileName）；
//实际开始上传
r、 上传（）；
console.log（文件）；
});
r、 on（'pause'，function（）{
//显示简历，隐藏暂停
$（'.resumable progress.progress resume link'）.show（）；
$（'.resubable progress.progress pause link'）.hide（）；
});
r、 on（'complete'，function（）{
//上载完成时隐藏暂停/恢复
$（'.resumable progress.progress resume链接、.resumable progress.progress pause链接'）.hide（）；
});
r、 on（'fileSuccess'，函数（文件、消息）{
//反映文件上载已完成
$（'.resumable file-'+file.uniqueIdentifier+'.resumable file progress'）.html（'（已完成）'）；
});
r、 on（'fileError'，函数（文件、消息）{
//反映文件上载已导致错误
$（'.resubable file-'+file.uniqueIdentifier+'.resubable file progress'）.html（'（无法上载文件：'+message+'））；
});
r、 on（'fileProgress'，函数（文件）{
//处理文件和整体上载的进度
$（'.resumable file-'+file.uniqueIdentifier+'.resumable file progress'）.html（Math.floor（file.progress（）*100）+'%'）；
$（'.progress bar'）.css（{width:Math.floor（r.progress（）*100）+'%'）；
});
}