|
场景:我拥有的是一个上传表单,该表单使用nginx uploadProgress模块报告上传进度。下面的代码在Firefox中可以正常工作,但是使用Chrome和Chromium时,页面加载时不会触发AJAX,并且仅在我停止请求时才运行AJAX(因此在上传过程中途结束)。我迷失了为什么它不起作用。因此,非常感谢您的帮助。
我还发现奇怪的是,Chrome / Chromium似乎在不通知我的情况下使用上传进度更新了窗口状态栏。
我在哪里看不到我在哪里设置。 Chrome可能有内部进度表吗?
upload.js
$(document).ready(function()
{
$(\'form\').uploadProgress(
{
uploading: function(upload)
{
$(\'#percents\').html(upload.percents+\'%\');
$(\'#progressbar\').css({width: upload.percents+\'%\'});
},
progressUrl: \"/progress\",
interval: 3
});
})
jquery.uploadProgress.js
/*
* jquery.uploadProgress
*
* Copyright (c) 2008 Piotr Sarnacki (drogomir.com)
* - Original release.
*
* Copyright (c) 2011 Mathew Davies (thepixeldeveloper@googlemail.com)
* - Refactored a lot of code into their own functions
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($)
{
/**
* Generate a UUID used to uniquely identify form uploads.
*
* @return string
*/
function generate_uuid()
{
var uuid = \"\";
for (i = 0; i < 32; i++)
{
uuid += Math.floor(Math.random() * 16).toString(16);
}
return uuid;
}
/**
* Calls the progress URL to get the latest statistics from
* the uploaded form.
*
* @return void
*/
function update(object, options)
{
$.ajax(
{
type: \'GET\',
cache: false,
dataType: options.dataType,
url: options.progressUrl,
beforeSend: function(xhr)
{
xhr.setRequestHeader(\"X-Progress-ID\", options.uuid);
},
success: function(upload)
{
alert(\'progress ...\');
if (upload)
{
if (upload.state == \'uploading\')
{
upload.percents = Math.floor((upload.received / upload.size) * 1024) / 10;
options.uploading(upload);
}
if (upload.state == \'done\' || upload.state == \'error\')
{
window.clearTimeout(options.timer);
}
if (upload.state == \'done\')
{
upload.percents = 100;
options.done(upload);
}
if (upload.state == \'error\')
{
upload.percents = 0;
options.error(upload);
}
}
}
});
}
/**
* Updates the form action to use the UUID.
*/
function update_form_action(form, uuid)
{
if(old_id = /X-Progress-ID=([^&]+)/.exec(form.attr(\"action\")))
{
var action = form.attr(\"action\").replace(old_id[1], uuid);
}
else
{
var action = form.attr(\"action\") + \"?X-Progress-ID=\" + uuid;
}
form.attr(\"action\", action);
}
$.fn.uploadProgress = function(options)
{
var options = $.extend(
{
dataType: \"json\",
interval: 2000,
progressUrl: \"/progress\",
start: function() {},
uploading: function() {},
done: function() {},
error: function() {},
timer: \"\"
}, options);
return this.each(function()
{
$(this).submit(function()
{
var $this = $(this);
// Generate a new UUID
options.uuid = generate_uuid();
// Update form action with ID
update_form_action($this, options.uuid);
// Start callback
options.start();
// Start process
options.timer = window.setInterval(function()
{
update($this, options)
},
options.interval * 1000);
});
});
};
})(jQuery);