Ajax, JQuery & amp; Передача переменной PHP в JQuery
У меня есть страница, которая позволяет пользователям загружать несколько файлов и просматривать их без обновления страницы с помощью jquery. В php я генерирую уникальный file_id для каждого имени файла, который затем хотел бы передать обратно в JQuery и использовать его для загрузки изображения предварительного просмотра и т. Д.
Я надеюсь, что я объяснил себе ясно.
Спасибо за любые указатели!
Код PHP:
// php code to upload file and generate unique file id. then...
if (move_uploaded_file($main_image, $file)) {
echo "success";
echo $file_id; // <--- I WANT TO PASS THIS VARIABLE BACK IN TO JQUERY
} else {
echo "error";
}
Код J-запроса:
$(function(){
var btnUpload=$('#upload_main');
var mestatus=$('#mestatus');
var button=$('#button');
var files=$('#main_file');
new AjaxUpload(btnUpload, {
action: 'classified-ads/upload-classified-image.php?filenumber=1',
name: 'file1',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif|'')$/.test(ext))){
// extension is not allowed
mestatus.text('Only JPG, PNG or GIF files are allowed');
return false;
}
mestatus.html('<img src="extras/ajaxuploader/progress_bar.gif" height="30" width="340">');
button.html('Loading...');
$('#upload_main').removeClass('hover').addClass('upload_button_loading');
},
onComplete: function(file, response){
//On completion clear the status
mestatus.text('Photo Uploaded Sucessfully!');
button.html('Change Photo');
$('#upload_main').removeClass('upload_button_loading').addClass('upload_button');
//On completion clear the status
files.html('');
//Add uploaded file to list
if(response==="success"){
var file2 = file.replace(/\s/g, "_");
var file_id= file_id;
$('<div></div>').appendTo('#main_file').css('background-image', "url(/ht/classified-ads/temp_images/prev1_<?php echo $parsed_user;?>_"+file_id+")").addClass('main_success');
$("#image1_temp").val("main1_<?php echo $parsed_user;?>_"+file_id+"");
$("#thumbnail_temp").val("thumbnail_<?php echo $parsed_user;?>_"+file_id+"");
} else{
$('<li></li>').appendTo('#main_file').text(file).addClass('error');
}
}
});
});
Решение
В вашем PHP:
$response = array('result' => 'success', 'file_id' => $file_id);
echo json_encode($response);
В вашем JQuery:
var obj = $.parseJSON(response);
Затем вы проверите, был ли ответ успешным с if (obj.result == 'success') и вы получите свой file_id с obj.file_id
Другие решения
Самый простой способ — это сделать так, чтобы значения MULTIPLE были возвращены:
// Make a variable to hold data to send back and keep track of your separator
$data = '';
$separator = 1;
// Put this in a loop, your loop will depend on how many file uploads you have
// I did not do the loop for you
if (move_uploaded_file($main_image, $file)) {
// echo "success"; Take this out
if ($separater==1){
$data .= $file_id;
} else {
$data .= ','.$file_id;
}
$separater++;
}
// Now outside the loop echo the results back
echo $data;
Получив эту информацию, вы можете манипулировать ею с помощью Javascript (Jquery). Просто используйте что-то вроде spli (‘,’); который дает вам массив имен файлов, которые вам нужны.
Если вы хотите, чтобы возвращалось только одно значение, то есть у вас есть только один идентификатор файла, чтобы отправить обратно все о цикле, и PHP будет выглядеть так:
if (move_uploaded_file($main_image, $file)) {
// echo "success"; Take this out
$data = $file_id;
// Now echo the results back
// Its been a while since I've done this but there may be times its ok to use return
echo $data;
} else {
// Handel error here
echo "error";
}
Теперь, основываясь на вашем коде, эта информация должна быть найдена и обработана здесь:
onComplete: function(file, response){ ... }
Вместо того, чтобы искать «Успех», вам нужно изменить свой код, чтобы искать идентификатор файла или что-то вроде ошибки вместо этого (что проще), например так:
if(response!=="error"){
// Now you can use your variable "response" here since it contains the file id
} else {
// Handle the error
}
Причина, по которой я дал вам длинное объяснение о возвращении нескольких значений, заключается в том, что это более распространено, когда вы начинаете создавать более сложные формы, и теперь это не мешало бы использовать. Таким образом, вы можете разрешить несколько загрузок файлов, например. Например, когда я использую AJAX, я возвращаю что-то вроде этого:
1::value,value,value
Теперь я просто разделил это на массивы сначала по ::, а затем по, например, в этой строке написано: «Нет ошибок» (1, что, как мы знаем, также является ИСТИНОЙ), и вот ваши данные: значение, значение, значение, которое вы теперь можете использовать для вещи в вашем Jquery или просто распечатать в документе.
Вы должны посмотреть на Страница JQuery AJAX для подробных примеров и объяснений, это объясняет проблему, с которой вы столкнулись, чтобы получить результаты обратно. Посмотрите на .done .success .complete особенно.
detector