Tengo un formulario que tiene 3 entradas:

[1] campo de entrada de texto para una actualización de estado

[2] carga de archivos (para una foto)

[3] campo de entrada de texto para adjuntar un enlace

El usuario alterna entre cada uno según lo que quiera hacer. Por ejemplo, al elegir [2], las entradas [1] y [3] están ocultas.

Todas estas entradas están contenidas en un solo formulario con idposts_form. Las opciones [1] y [3] publican a través de Ajax en diferentes controladores.

Mi problema ahora es con la opción [2] porque no es posible cargar imágenes usando jQuery ajax.

Algunas soluciones que he visto involucran el uso del complemento jQuery Form, pero me pregunto si sería posible cargar imágenes sin el uso de un complemento.

Por ejemplo, esta sería la base de código para cargar que, por supuesto, no funciona.

    $.ajax({
        url: 'chat/upload/' + <?php echo $page_id; ?>,
        type: 'POST',
        data: $('#posts_form').serialize(),
        dataType: 'html',
        beforeSend: function(){
              $('#loading').show();
            },          
        success: function(html) {
            $('#attach').replaceWith(html);
            $('#loading').hide();
            $('#posts_form input').val('');
            $('.posts_link').val('');
            $('#chat_input').hide();
            }
        });

¿Alguna sugerencia sobre lo que se podría agregar / cambiar para permitir la carga de imágenes usando jQuery solamente, sin complementos?

Gracias