Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I use ajax to upload a text field and a file?

    I'm new at AJAX and am working on an implementation of a form that will upload a name and a file to a php file that processes the data and sends it to a database for insertion using mysqli. I've tested the php file and it does work. My problem is in the AJAX code. I've tried an implementation using XMLHTTP and using jQuery. Both leave the page and open the PHP file in the browser. As a disclamer, I posted this question to another coding site, a fight ensued between two posters, and so I'm trying here to hopefully get a reasoned and calm response with productive suggestions.

    I realize that currently "get" is being sent to the PHP file rather than "post", but PHPStorm tells me that "post" is not available in that form. What's my alternative? Am I on the right track or is there another direction I should go? How do I refresh only the form and keep the PHP page from loading?

    Here's the relevant snippet of my code,

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <script src="jquery.min.js"></script>
        <script src="jquery.validate.js"></script>
        <script>
            $(document).ready(function() {
                $('#addForm').validate({
                    
                    submitHandler: function (form) {
                        $('input[name="usingAJAX"]', this).val('true');
                        var url = $(form).prop('action');
                        var dataToSend = $(form).serialize();
                        var callback = function(dataReceived) {
                            $(form).hide();
                            //result message
                            $('body').append(dataReceived)
                        };
                        var typeOfDataToReceive = 'html';
                        
                        $.get(url, dataToSend, callback, typeOfDataToReceive),
                        return false;
                    }
                });
            });
    
        </script>
    </head>
    <body>
    <form id="addForm" action="addInfo.php" enctype="multipart/form-data">
        <input type="hidden" name="usingAJAX" value="false"/>
        <label for="aname">Name: </label>
        <input type="text" name="aname" id="aname" class=required/>
        <label for="aimage">Photo: </label>
        <input id="aimage" type="file" name="aimage" class="required">
        <input type="submit" value="ADD"/>
    </form>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I should clarify as well, that this code does not appear to be passing the text and file to the PHP file. The errors returned indicate that the variables remain empty.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    The answer is quite easy ... and quite devastating. You cannot send the content of an input element of type="file" using jQuery Ajax methods.

    Possible solutions:
    - Use regular form submit
    - Check the File API together with XMLHttpRequest level 2 (both not supported by all browsers yet)
    - Flash fallback solutions (e.g. uploadify)

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    .. or use an iFrame. In the parent window, check to see if the file input is not blank. If it isn't, submit that, first, then the rest via AJaX.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by devnull69 View Post
    The answer is quite easy ... and quite devastating. You cannot send the content of an input element of type="file" using jQuery Ajax methods.
    you used to be right, until FormData came along...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by devnull69 View Post
    The answer is quite easy ... and quite devastating. You cannot send the content of an input element of type="file" using jQuery Ajax methods.

    Possible solutions:
    - Use regular form submit
    - Check the File API together with XMLHttpRequest level 2 (both not supported by all browsers yet)
    - Flash fallback solutions (e.g. uploadify)
    Actually the only browsers that don't support the File API are IE9, Safari 5.x, Opera 10.x, and Firefox 3.x. I.e all old browser versions. As for XHR2 support (file uploading in this case), only IE9, and Opera 11.x and below don't support it. So pretty good support.

    And yeah the FormData object would be the OP's best bet.
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •