Пример того, как можно отправить файл на сервер используя Ajax

24.12.2014
Далеко не всегда удобно обновлять страницу при отправке формы.
Существует великое множество плагинов для этой цели, но иногда целый плагин не нужен или он не достаточно гибок.
Вот пример того, как можно закачать картинку на сервер (приведена только фронтэнд часть)

Этот пример устарел, вот более новая статья 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    $('#btnGo').click(function(){

        var fd = new FormData();
        fd.append('id', '1');
        fd.append('id_cat', '12');
        fd.append('text', 'tExT');
        fd.append('img', $('#File1')[0].files[0]);

        $.ajax({
            type: 'POST',
            url: 'response.php',
            data: fd,
            processData: false,
            contentType: false,
            dataType: "json",
//            dataType: "text",
            success: function(data) {
                $(".message_title").html('OK');
                $(".message").html(data);
            },
            error: function(data) {
                $(".message_title").html('Error');
                $(".message").html(data);
            }
        });
    });
});
</script>


<div class="message_title"></div>
<div class="message"></div>

<form id="form1" action="">
    <input type="file" id="File1" />
</form>

<button type="button" id="btnGo">Go</button>

Категории: JQuery