Web

Как выполнить загрузку файла с помощью сериализации jquery

Итак, у меня есть форма, и я отправляю ее через ajax, используя функцию сериализации jquery.

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",

        cache   : false,

        url     : "blah",

        data        : serialized,

        success: function(data) {

        }

 Но что если в форме есть поле <input type="file">.... Как мне передать файл в форму, используя этот метод сериализации ajax... Печать $_FILES ничего не выводит.

 

Ответ 1

Используйте объект FormData. Он работает для любого типа формы:

$(document).on("submit", "form", function(event) {

    event.preventDefault();

    $.ajax({

        url: $(this).attr("action"),

        type: $(this).attr("method"),

        dataType: "JSON",

        data: new FormData(this),

        processData: false,

        contentType: false,

        success: function (data, status) {

 

        },

        error: function (xhr, desc, err) {

            

        }

    });        

});

 

 Ответ 2

Файл не может быть загружен с помощью AJAX, потому что нельзя получить доступ к содержимому файла, хранящегося на компьютере клиента, и отправить его в запросе с помощью javascript. Один из методов достижения этой цели использование скрытых iframe. Есть хороший плагин jquery form, который позволяет вам AJAXify ваши формы, и он также поддерживает загрузку файлов. Поэтому при использовании этого плагина ваш код будет выглядеть следующим образом:

$(function() {

    $('#ifoftheform').ajaxForm(function(result) {

        alert('Форма была успешно обработана');

    });

});

 Плагин автоматически позаботится о подписке на событие, submit формы, отмене отправки по умолчанию, сериализации значений, использовании правильного метода, обработке полей загрузки файлов и т. д.



Ответ 3

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">

    <input id="name" name="name" placeholder="Enter Name" type="text" value="">

    <textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>

    <select name="gender" id="gender">

        <option value="male" selected="selected">Male</option>

        <option value="female">Female</option>

    </select>

    <input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>

</form>

 JavaScript

var data = new FormData();

// Данные формы

var form_data = $('#my_form').serializeArray();

$.each(form_data, function (key, input) {

    data.append(input.name, input.value);

});

// Данные файла

var file_data = $('input[name="my_images"]')[0].files;

for (var i = 0; i < file_data.length; i++) {

    data.append("my_images[]", file_data[i]);

}

// Данные клиента

data.append('key', 'value');

 

$.ajax({

    url: "URL",

    method: "post",

    processData: false,

    contentType: false,

    data: data,

    success: function (data) {

        // успешное выполнение

    },

    error: function (e) {

        // ошибка

    }

});

 PHP

<?php

    echo '<pre>';

    print_r($_POST);

    print_r($_FILES);

    echo '</pre>';

    die();

?>

 

Ответ 4

$(document).on('click', '#submitBtn', function(e){

e.preventDefault();

e.stopImmediatePropagation();

var form = $("#myForm").closest("form");

var formData = new FormData(form[0]);

$.ajax({

    type: "POST",

    data: formData,

    dataType: "json",

    url: form.attr('action'),

    processData: false,

    contentType: false,

    success: function(data) {

         alert('Success! Form data posted with file type of input also!');

    }

)};});

 Используя new FormData() и установив processData: false, contentType:false в ajax вызове, я смог отправить форму с файловым вводом. Используя приведенный выше код, я могу отправить данные формы с файловым полем также через Ajax.

 

Ответ 5

Я думаю, что есть гораздо более эффективный способ сделать это специально для тех, кто хочет ориентироваться на все браузеры, а не только на браузеры с поддержкой FormData. Идея в том, чтобы иметь скрытый IFRAME на странице и сделать обычный submit для примера From внутри IFrame.

<FORM action='save_upload.php' method=post

   enctype='multipart/form-data' target=hidden_upload>

   <DIV><input

      type=file name='upload_scn' class="file_upload"></DIV>

   <INPUT

      type=submit name=submit value=Upload /> <IFRAME id=hidden_upload

      name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'

      style='width:0;height:0;border:0px solid #fff'></IFRAME> 

</FORM>

Самое главное — сделать целью формы скрытый iframe идентификатор или имя и enctype multipart/form-data, чтобы разрешить прием, например,  фотографий:

javascript

function getFrameByName(name) {

    for (var i = 0; i < frames.length; i++)

        if (frames[i].name == name)

            return frames[i];

    return null;

}

 

function uploadDone(name) {

    var frame = getFrameByName(name);

    if (frame) {

        ret = frame.document.getElementsByTagName("body")[0].innerHTML;

        if (ret.length) {

            var json = JSON.parse(ret);

                 // делайте, что хотите

        }

    }

}

 PHP

<?php

  $target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);

  if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {

    $result = ....

  }

echo json_encode($result);

?>

 

 Ответ 6

Вы можете загружать файлы через AJAX с помощью метода FormData. Хотя IE7, 8 и 9 не поддерживают функцию FormData.

$.ajax({

    url: "ajax.php", 

    type: "POST",             

    data: new FormData('form'),

    contentType: false,       

    cache: false,             

    processData:false, 

    success: function(data) {

        $("#response").html(data);

    }

});

 

Схожие статьи

Краткая инструкция, как заливать на Github коды собственных программ
Web

Краткая инструкция, как заливать на Github коды собственных программ

Приложение Синтезатор речи Google: как пользоваться и как отключить?
Web

Приложение Синтезатор речи Google: как пользоваться и как отключить?

Web

Как получить миниатюру видеоролика YouTube используя YouTube API?

Как стать веб-разработчиком и что нужно знать веб-разработчику
Web

Как стать веб-разработчиком и что нужно знать веб-разработчику