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?

[Comandeer]

A może https://developer.mozilla.org/en/docs/Web/API/FormData ?

[viking]

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

[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

[kayman]

[HTML] pobierz, plaintext 
var image = document.getElementById("img");
    file = image.files[0];
    if (file.type === 'image/jpeg') {
 
        formData = new FormData();
        formData.append('action', 'saveImage');
        formData.append('image', file);
 
        $.ajax({
            url: '/ajax.php',
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                successSaveImage(result);
            }
        });
    } else {
        $('#error').text('Zły plik');
    }
[HTML] pobierz, plaintext 

Ten post edytował kayman 21.05.2016, 12:32:46

[Comandeer]

Kod

var plik = new FormData($('input[name="plik-avatar"]'));

Nic dziwnego, że nie działa, skoro przekazujesz obiekt jQuery opakowujący input a nie formularz jako obiekt DOM

Kod

var form = new FormData( document.querySelector( 'form.jakis-tam' ) );