Upload plików bez przejścia do innej strony Opcje

[castagir]

Witam!

Potrzebuję stworzyć prosty upload obrazu, bez przeładowania strony.
Chodzi o wrzucenie avatara, a zanim nastąpi przeniesienie na serwer, najpierw zweryfikować czy jest odpowiedniego formatu i wagi.

Jedyne poradniki jakie znalazłem w internecie to typowe <FORM>, które po prostu przerzucają na nową stronę. Natomiast gry próbuję grzebać w JS, to ciągle mi wychodzi, że nie może odnaleźć żadnych files w tablicy, albo w ogóle nic nie reaguje.
Nie miałem z tym wcześniej styczności i całkowicie nie wiem jak to ugryźć. Czy ktoś może mógłby polecić jakiś dobry poradnik, lub napisać kilka wskazówek od czego zacząć lub co robić dalej?

[castagir]

Mam taki przycisk, z którego chciałbym wydobyć więcej o tym pliku:

[HTML] pobierz, plaintext 
<div class="if-A1">
    <span>wybierz</span>
    <input type="file" name="plik-avatar" accept="image/*">
</div>
[HTML] pobierz, plaintext 

Próbuję takich metod i nic:

[HTML] pobierz, plaintext 
var plik = new FormData($('input[name="plik-avatar"]'));
-----------------------
var plik = new FormData($('input[name="plik-avatar"]').files[0]);
-----------------------
var plik = $('input[name="plik-avatar"]');
alert(plik.name);
-----------------------
var plik = $('input[name="plik-avatar"]');
alert(plik.files[0].name);
[HTML] pobierz, plaintext 

A jak chcesz od razu gotowe to możesz użyć http://www.dropzonejs.com/

Nie lubię korzystać z gotowców, bo za dużo jest szperania w kodzie i modyfikacji. Staram się robić po swojemu, tylko najtrudniej jest mi zacząć, gdyż nie wiadomo z którego miejsca podejść niektóre tematy.
Ma to też takie znaczenie, że jeżeli się nauczę tego teraz to później łatwiej mi będzie modyfikować, a będę to robić na 100%.

Mimo to dzięki za podesłanie (IMG:style_emoticons/default/smile.gif)