Зачем указывать индекс после селектора $('files')[0]
 

Добрый день!

Изучаю ajax с jquery;
Есть html

<p>Загрузите фото <input type='file' id="fileinput"/></p>
                   <p id="upload_pic_action">Загрузить </p>

У инпута id='fileinput';

Вот js (ajax)

$(document).ready(function(){


$( '#upload_pic_action' ).click(function ( ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#fileinput' )[0].files[0] );/*находим загруженный файл. 

    $.ajax({
        url: 'add_project_1.php',
        data: data,
        processData: false,
	contentType:false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });


});

});

С

files[0]

все понято .,у инпута с типом file есть массив files[].Первый загруженный элемент имеет индекс[0];

Но зачем к ID $( '#fileinput' )[0] добавлять индекс [0],элемент ведь один.

Если убрать индекс,тоесть так
data.append( 'file', $( '#fileinput' ).files[0] )
то отправка не работает.Сервер ничего не выдает ..даже ошибку.

На обычном js если делать , также никаких индексов не делал и все работает

var file=document.getElementById('fileinput');
 data = new FormData();
data.append('filename',file.files[0];

попробуй открыть консоль и посмотреть чем отличаются
console.dir ( $( '#fileinput' )[0] )
и
console.dir ( $( '#fileinput' ) )

$( x ) - это функция jquery, которая возвращает объект jquery, со своими свойствами и методами. К чистому js и DOM он относится лишь косвено.
$( x )[0] - под ключом 0 в объекте jquery хранится ссылка на нативный элемент DOM.