Upload obrazu na serwer bez wysłania formularza

Question

Witam po raz pierwszy!
Utworzyłem prosty formularz z możliwością załączania plików bez przeładowania strony (ajax). Jeśli pole imie lub nazwisko NIE jest wypełnione, to po wskazaniu pliku i kliknieciu "Załaduj obraz" skrypt umieszcza plik na serwerze. Problem pojawia się, gdy wypelnimy pole imie i nazwisko, nastepnie wskazemy plik i klikniemy "Załaduj obraz". Formularz zostaje wysłany, bez załadowania pliku na serwer. Demo: http://test8560.futurehost.pl/abc/

Kod w HTML:

<form method="post" >
Podaj swoje imię<br><input name="Imię" ><br>
Podaj swoje nazwisko<br><input name="Nazwisko"><br>
<input id="sortpicture" type="file" name="sortpic" >
<button id="upload">Załaduj obraz</button>
<input type="submit" value="Wyślij formularz" >
</form>

 

Kod w JS (jquey):

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
                url: 'upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(php_script_response){
                    alert(php_script_response); // display response from the PHP script, if any
                }
     });
});

Kod upload.php

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

 

Answer 1

a może tak:

http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP

 

p.s. nie wiem czy widziałeś kiedyś jak to robią z załącznikami przy wysyłaniu maila ze strony. Klikasz napisz wiadomość potem wrzucasz pliki na serwer a potem zatwierdzasz maila gdzie wsio jest składane do kupy... i wysyłane

Answer 2

Dodaj do forma enctype="multipart/form-data". Method nie potrzebujesz w tym przypadku.

data: new FormData($('#id_formularza')[0])

Ta linijka wystarczy przy data w Ajaxie.