jQuery « Отправка файла на сторонний сервер средствами jQuery Form
Здравствуйте. Обращаюсь сюда первый раз, поиском пользовался, но получается слишком большой запрос, и мне ничего путного не вернулось.
В общем, ситуация такая. Есть форма, которая отправляет POST-запрос (файл, картинку), и работающая совместно с jQuery Form. Используется вот такой вот скрипт:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
$(document).ready(function() {
var options = {
beforeSubmit: showRequest, // для показа "подождите..."
success: showResponse // когда всё загрузилось
};
$('#fileform').submit(function(){
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest(formData, jqForm, options) {
document.getElementById('results').innerHTML="Ожидание отправки..."; // обратите внимание
return true;
}
function showResponse(responseText, statusText, xhr, $form) {
var doc = document.getElementById('results'); // в HTML есть див с id = results
if (responseText == "ERR_LOADFAIL") // обрабатываем ответы PHP-скрипта
{
doc.innerHTML = "Общая ошибка";
} else
if (responseText == "ERR_LARGE")
{
doc.innerHTML = "Слишком большой файл";
} else
if (responseText == "ERR_INCORRECT")
{
doc.innerHTML = "Неверный тип";
} else
doc.innerHTML = "Файл загрузился";
}
Если в форме идёт обращение на скрипт, расположенный на том же сервере, то всё прокатывает. Но если форма имеет такой вид:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<form action="http://domain.com/loader.php" method="POST" enctype="multipart/form-data" id="fileform">
То на странице зависает надпись "Ожидание отправки...". И всё. Хотя данные на сервер отправились, картинка лежит, но вот ответа jQuery не получает.
Подскажите, как же всё-таки, не перезагружая странички, передать картинку на другой сервер и получить ответ?
Если не использовать AJAX/jQuery, картинка всё равно грузится и перенаправляется на тот-самый loader.php.
Может, не хватает какой-то функции, или стоит посмотреть в сторону других средств отправки формы без перезагрузки страницы?
В общем, ситуация такая. Есть форма, которая отправляет POST-запрос (файл, картинку), и работающая совместно с jQuery Form. Используется вот такой вот скрипт:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
$(document).ready(function() {
var options = {
beforeSubmit: showRequest, // для показа "подождите..."
success: showResponse // когда всё загрузилось
};
$('#fileform').submit(function(){
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest(formData, jqForm, options) {
document.getElementById('results').innerHTML="Ожидание отправки..."; // обратите внимание
return true;
}
function showResponse(responseText, statusText, xhr, $form) {
var doc = document.getElementById('results'); // в HTML есть див с id = results
if (responseText == "ERR_LOADFAIL") // обрабатываем ответы PHP-скрипта
{
doc.innerHTML = "Общая ошибка";
} else
if (responseText == "ERR_LARGE")
{
doc.innerHTML = "Слишком большой файл";
} else
if (responseText == "ERR_INCORRECT")
{
doc.innerHTML = "Неверный тип";
} else
doc.innerHTML = "Файл загрузился";
}
Если в форме идёт обращение на скрипт, расположенный на том же сервере, то всё прокатывает. Но если форма имеет такой вид:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<form action="http://domain.com/loader.php" method="POST" enctype="multipart/form-data" id="fileform">
То на странице зависает надпись "Ожидание отправки...". И всё. Хотя данные на сервер отправились, картинка лежит, но вот ответа jQuery не получает.
Подскажите, как же всё-таки, не перезагружая странички, передать картинку на другой сервер и получить ответ?
Если не использовать AJAX/jQuery, картинка всё равно грузится и перенаправляется на тот-самый loader.php.
Может, не хватает какой-то функции, или стоит посмотреть в сторону других средств отправки формы без перезагрузки страницы?
1 ответов
Когда используется AJAX для submit-а формы, тут возникает проблема с Cross-Domain-Request, если вы имеете доступ к скрипту loader.php на другом сервере, то есть возможность правильно заполнить Cross-Origin заголовки и тогда все запуститься само, а если это совсем посторонний скрипт - тогда придется писать какой-нибудь proxy-скрипт у себя
Вопрос решён использованием сURL и прокси-скриптов. Вот так:
<?
$tmpn = $_FILES['f']['tmp_name']; // временное имя принятого файла
$ch = curl_init();
$data = array("f" => "@$tmpn"); // @ - значит файл для cURL
curl_setopt($ch, CURLOPT_URL, 'http://somesite.com/ld.php');
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // ld.php на стороннем сайте вернёт ссылку на загруженный файл
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$res = curl_exec($ch);
echo($res); // результат (ответ сервера)
?>