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

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

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

но что тогда, если форма имеет

8 59
jquery php serialization ajax file-upload

8 ответов:

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

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

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

43

теперь вы можете загружать файлы с Ajax!

примеры:

https://stackoverflow.com/a/8758614/1072492

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

37

он работает для любого типа формы

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

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        

});
20

вы можете загружать файлы через 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);
    }
});
8
   var form = $('#job-request-form')[0];
        var formData = new FormData(form);
        event.preventDefault();
        $.ajax({
            url: "/send_resume/", // the endpoint
            type: "POST", // http method
            processData: false,
            contentType: false,
            data: formData,

это сработало для меня! просто установите processData и contentType False.

4

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();

//Form data
var form_data = $('#my_form').serializeArray();
$.each(form_data, function (key, input) {
    data.append(input.name, input.value);
});

//File data
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]);
}

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

$.ajax({
    url: "URL",
    method: "post",
    processData: false,
    contentType: false,
    data: data,
    success: function (data) {
        //success
    },
    error: function (e) {
        //error
    }
});

PHP

<?php
    echo '<pre>';
    print_r($_POST);
    print_r($_FILES);
    echo '</pre>';
    die();
?>
3

в HTML5 вводит FormData класс, который можно использовать для загрузки файлов с помощью ajax.

поддержка FormData начинается со следующих версий настольных браузеров. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData

0

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

идея спрятать IFRAME на странице и делает нормальное представление для примера 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 ID или имя и enctype multipart / form-data разрешить принимать фото

javascript side

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);
         // do what ever you want 
        }
    }
}

пример 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);
?>
0