Загрузка изображения AJAX

[dalexra51]

Всем привет!
Никак не могу понять, как мне сделать загрузку изображения на сервак через AJAX.

То есть, простоя форма с одним полем типа FILE ну и кнопка submit на которой preventDefault.

А вот не могу понять как организовать функцию. которая бы брала файл указанный в соответствующем поле формы и засылала на сервак, ну и получала ответ....

Спасибо!

<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="http://upload/ajaxImageUpload.php" method="post">
			<input type="file" style="" id="ImageBrowse" name="image" />
			<input type="submit" name="upload" value="Upload" id="upload" />			
		</form>

		<script type="text/javascript">		
			jQuery('#upload').on( 'click', function(event){
				event.preventDefault();				
				var formData = new FormData("#imageUploadForm");
				jQuery.ajax({
					type:'POST',
					url: 'http://upload/ajaxImageUpload.php',
					data:formData,
					cache:false,
					contentType: false,
					processData: false,
					success:function(data){
						console.log("success");
						console.log(data);
					},
					error: function(data){
						console.log("error");
						console.log(data);
					}
				});				
				alert(data);	
			});		
		</script>

вот эта штуковина в результате пишет что data is not defined...

На серваке скрипт пока ничего не делает просто пишет echo "Hello", хочу для начала просто связь установить, а потом можно будет начать обрабатывать $_POST and $_FILES

П.С.
когда непосредственно в запрос поставил адрес обработчика то получил ответ но вот теперь не понимаю почему не передаются данные... массив $_POST and $_FILES пустые

[KosBeg]

<script src='jquery-2.1.4.js'></script>

<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="http://upload/ajaxImageUpload.php" method="post">
			<input type="file" style="" id="ImageBrowse" name="image" />
			<input type="submit" name="upload" value="Upload" id="upload" />			
		</form>

		<script>		
			jQuery('#upload').on( 'click', function(event){
				event.preventDefault();				
// var formData = new FormData("#imageUploadForm"); - нужно new FormData(imageUploadForm)
				jQuery.ajax({
					type:'POST',
					url: jQuery("#imageUploadForm").attr('action'),
					data:formData,
					cache:false,
					contentType: false,
					processData: false,
					success:function(data){
						console.log("success");
						console.log(data);
					},
					error: function(data){
						console.log("error");
						console.log(data);
					}
				});				
// alert(data); - "ReferenceError: data is not defined" потому что здесь "data" вызывать нельзя можно вызывать например в "error: function(data){}" или "success:function(data){}"
			});		
		</script>

[dalexra51]

for(var item in formData) {
		console.log(item);
	}

Выводит просто append....

[dalexra51]

c data разобрался.. спасибо. проьлема с formdata

[KosBeg]

извиняюсь за ошибку в выделении кода... не исправил сразу, ибо мне нужно было отойти...
а теперь о FormData: вы используюте "JQuery-подобный" селектор "#imageUploadForm"
а нужно указывать просто айди формы imageUploadForm, причем БЕЗ КАВЫЧЕК!
поэтому правильно не

var formData = new FormData("#imageUploadForm");

а правильно

var formData = new FormData(imageUploadForm);

[KosBeg]

https://developer.mozilla.org/ru/doc...mData/FormData - вот Вам почитать о FormData

[apolon13]

Попробуйте так

<form id="ajaxform" enctype="multipart/form-data">
      <input class="form-field"  type="file" name='filename' /><br />
      <input class="submit-button" type="submit" value="загрузить" />
 </form>

$("#ajaxform").submit(function(e){ 
var fd = new FormData();
fd.append('image', $('input[type=file]')[0].files[0]);
$.ajax({ 
type: 'POST', 
url: 'gogogo.php', 
data: fd,
processData: false,
contentType: false,
});

[Decode]

var formData = new FormData("#imageUploadForm");

var fd = new FormData( $('#ajaxform') );

Вот так работает.

[KosBeg]

Вот так работает.

мой вариант тоже работает)))