Приветствую уважаемые форумчане!
Сижу второй день, не могу понять в чем дело, гуглил - ничего не нашел(
У самого опыта похоже маловато, чтобы разобраться с возникшей проблемой.
Система работает так:
Имеется страница с формой загрузки файла, к этой странице подключен jquery и jquery.uploadProgress.
На сервере установлен Apache и Nginx, с последним работает Upload Progress Module.
Вообщем, сложно объяснить в чем проблема, скажу в кратце, что не корректн работает jquery.uploadProgress.
Запрос на Nginx он отправляет, но вот ответ он не обрабатывает!! В этом и вся проблема!
В листинге jquery.uploadProgress я выделил участок кода который не выполняется по не известным мне причинам.
Если не сложно пройдите по ссылке ниже, чтобы посмотреть "в рабочем" варианте, что да как.
Заранее спасибо за помощь. Надежда тока на вас
Страница с формой и подключенными jquery и jquery.uploadProgress:
http://evildevel.com/upload.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ajaxFileUpload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script src="jquery.uploadProgress.js"></script>
<script type="text/javascript">
$(function() {
$('form').uploadProgress({
/* scripts locations for safari */
jqueryPath: "jquery.js",
uploadProgressPath: "jquery.uploadProgress.js",
progressUrl: "/upload_progress",
start:function(){},
uploading: function(upload) {$('#percents').html(upload.percents+'%');},
interval: 2000
});
});
</script>
<style type="text/css">
.bar {
width: 300px;
}
#progress {
background: #eee;
border: 1px solid #222;
margin-top: 20px;
}
#progressbar {
width: 0px;
height: 24px;
background: #333;
}
</style>
</head>
<body>
<form id="upload" enctype="multipart/form-data" action="/upload_file" method="post">
<input name="file" type="file"/>
<input type="submit" value="Upload"/>
</form>
<div id="uploading">
<div id="progress" class="bar">
<div id="progressbar"> </div>
</div>
</div>
<div id="percents"></div>
</body>
</html>
Листинг [jquery.uploadProgress]
/*
* jquery.uploadProgress
*
* Copyright (c) 2008 Piotr Sarnacki (drogomir.com)
*
* Licensed under the MIT license:
* [url]http://www.opensource.org/licenses/mit-license.php[/url]
*
*/
(function($) {
$.fn.uploadProgress = function(options) {
options = $.extend({
dataType: "json",
interval: 2000,
progressBar: "#progressbar",
progressUrl: "/progress",
start: function() {},
uploading: function() {},
complete: function() {},
success: function() {},
error: function() {},
preloadImages: [],
uploadProgressPath: '/javascripts/jquery.uploadProgress.js',
jqueryPath: '/javascripts/jquery.js',
timer: ""
}, options);
$(function() {
//preload images
for(var i = 0; i<options.preloadImages.length; i++)
{
options.preloadImages[i] = $("<img>").attr("src", options.preloadImages[i]);
}
/* tried to add iframe after submit (to not always load it) but it won't work.
safari can't get scripts properly while submitting files */
if($.browser.safari && top.document == document) {
/* iframe to send ajax requests in safari
thanks to Michele Finotto for idea */
iframe = document.createElement('iframe');
iframe.name = "progressFrame";
$(iframe).css({width: '0', height: '0', position: 'absolute', top: '-3000px'});
document.body.appendChild(iframe);
var d = iframe.contentWindow.document;
d.open();
/* weird - safari won't load scripts without this lines... */
d.write('<html><head></head><body></body></html>');
d.close();
var b = d.body;
var s = d.createElement('script');
s.src = options.jqueryPath;
/* must be sure that jquery is loaded */
s.onload = function() {
var s1 = d.createElement('script');
s1.src = options.uploadProgressPath;
b.appendChild(s1);
}
b.appendChild(s);
}
});
return this.each(function(){
$(this).bind('submit', function() {
var uuid = "";
for (i = 0; i < 32; i++) { uuid += Math.floor(Math.random() * 16).toString(16); }
/* update uuid */
options.uuid = uuid;
/* start callback */
options.start();
/* patch the form-action tag to include the progress-id if X-Progress-ID has been already added just replace it */
if(old_id = /X-Progress-ID=([^&]+)/.exec($(this).attr("action"))) {
var action = $(this).attr("action").replace(old_id[1], uuid);
$(this).attr("action", action);
} else {
$(this).attr("action", jQuery(this).attr("action") + "?X-Progress-ID=" + uuid);
}
var uploadProgress = $.browser.safari ? progressFrame.jQuery.uploadProgress : jQuery.uploadProgress;
options.timer = window.setInterval(function() { uploadProgress(this, options) }, options.interval);
});
});
};
jQuery.uploadProgress = function(e, options) {
jQuery.ajax({
type: "GET",
url: options.progressUrl + "?X-Progress-ID=" + options.uuid,
dataType: options.dataType,
success: function(upload) {
[B]if (upload.state == 'uploading') {
upload.percents = Math.floor((upload.received / upload.size)*1000)/10;
var bar = $.browser.safari ? $(options.progressBar, parent.document) : $(options.progressBar);
bar.css({width: upload.percents+'%'});
options.uploading(upload);
}
if (upload.state == 'done' || upload.state == 'error') {
window.clearTimeout(options.timer);
options.complete(upload);
}
if (upload.state == 'done') {
options.success(upload);
}
if (upload.state == 'error') {
options.error(upload);
}[/B]
}
});
};
})(jQuery);