I have a form that has 3 inputs: [1] text input field for a

Question

0

Editorial Team

Asked: May 23, 20262026-05-23T09:29:33+00:00 2026-05-23T09:29:33+00:00

I have a form that has 3 inputs: [1] text input field for a

0

I have a form that has 3 inputs:

[1] text input field for a status update

[2] file upload (for a picture)

[3] text input field for attaching a link

The user toggles between each one depending on what they want to do. For example when choosing [2], inputs [1] and [3] are hidden.

All of these inputs are contained within a single form with id posts_form. Options [1] and [3] post via Ajax to different controllers.

My problem now is with option [2] because it is not possible to upload images using jQuery ajax.

Some solutions I’ve seen involve using the jQuery Form plugin, but I wonder if it would be possible to do image uploading without the use of a plugin.

For example this would be the code base for uploading which of course doesn’t work.

    $.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();
            }
        });

Any suggestions on what could be added / changed to permit image upload using jQuery only, without plugins?

Thanks.