シナリオ: 私が持っているのは、nginx uploadProgress モジュールを使用してアップロードの進行状況を報告するアップロード フォームです。以下のコードは Firefox では正常に動作しますが、Chrome と Chromium では、ページの読み込み中に 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);