Как вывести фото с помощью JS+PHP+JQ+AJAX?

Question

[Caspanch]

Ситуация такая : пользователь загружает фотографии,которые помещается в директорию images,есть кнопка delete(фотография удаляются с базы и сервера) и есть submit,по которому все подтверждается.


Файлы записываются на сервер и в базу данных(это работает),но картинка которую должен видеть пользователь после загрузки не появляется,потому что я меняю имя файла на уникальное(чтобы при загрузки одинаковых файлов на сервер они не совпадали с уже закаченными)

$uploaddir = 'images/'; 
$nam=time().$_FILES['uploadfile']['name'];
$file = $uploaddir .time(). basename($_FILES['uploadfile']['name']);

Прием файла js-ом
(часть после обработки файла)

onComplete: function(file, response)
	{
		status.text('');
		var bb=response.substr(0,7)
		var idd=response.replace('success',' ');
		var idb =idd.replace(/^\s*|\s*$/g,'');
		if(bb==="success")
		{
			$('<span id='+idd+'></span>').appendTo('#files').html('<img src="images/'+file+'" alt="" width="120" height="120" style="margin:5px;" /><br><a href="javascript:void(0)" onClick="deleteFile('+idd+');">Delete</a>').addClass('success');
		}
		else 
		{
			$('<span></span>').appendTo('#files').text(response).addClass('error');
		}
	}});

Он получает старое имя файла в тэг.
Как я понимаю в файле,где проводятся манипуляциями с файлом нужно создавать массив json объектов и передавать его в тэги вывода картинки выше.

$json = json_encode(array('foto'=>'$nam','success'=>1));
echo $json;

Но когда я пытаюсь получить json массив в onComlete вылезает ошибка


Что делать?

Answer 1

[Caspanch]

Как правильно отправить и принять json массив?

$response = json_encode(array('foto'=>"$nam",'success'=>"1"));
echo $responce;

<script language="javascript" type="text/javascript">
$(function()
{
	var btnUpload=$('#upload');
	var status=$('#status');
	new AjaxUpload(btnUpload, {
	action: 'upload-file.php',
	name: 'uploadfile',
	onSubmit: function(file, ext)
	{
	 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
     // extension is not allowed 
	status.text('Only JPG, PNG or GIF files are allowed');
	return false;
	}status.text('Uploading...');
	},
	
	onComplete: function(file, response)
	{

		//On completion clear the status
		status.text('');
		//Add uploaded file to list
		var obj = JSON.parse('response'); ??????
		//var bb=response.substr(0,7)
		//var idd=response.replace('success',' ');
		//var idb =idd.replace(/^\s*|\s*$/g,'');

		if(obj.success == "1")
		{
			$('<span id='+idd+'></span>').appendTo('#files').html('<img src="images/'+obj.foto+'" alt="" width="120" height="120" style="margin:5px;" /><br><a href="javascript:void(0)" onClick="deleteFile('+idd+');">Delete</a>').addClass('success');
		}
		else 
		{
			$('<span></span>').appendTo('#files').text(obj).addClass('error');
		}
	}});
});

Answer 2

[Вячеслав]

Как много технологий нужно, чтобы просто вывести фотографию..)
По теме:
у вас точно jQuery подключен? ругается на функцию parseJSON, очевидно - пишет, такой функции не существует.

Comments

[Caspanch]

Вроде бы да)

[Вячеслав]

jquery.parseJSON, version added: 1.4.1 (у вас - 1.3.2), а текущая версия jQuery - 1.9x

[Александр Таратин]

Вячеслав: Вы уверены в своем последнем высказывании?

[Александр Таратин]

Caspanch: в ie8+ доступен нативный JSON.parse();

[Александр Таратин]

Caspanch: Ну и делать превью уже давно можно на клиенте, без перессылки на сервер и обратно.

[Вячеслав]

Александр Таратин: api.jquery.com/jquery.parsejson считаете, официальная документация врет? :)

[Александр Таратин]

Вячеслав: Нет врете вы, последняя версия jq первой ветки 1.11.2
jquery.com

[Вячеслав]

Александр Таратин: С этим - согласен, но как это относится к теме текущего вопроса? :)

[Александр Таратин]

Вячеслав: Никак.