0

in my web page i've got this form:

<form style="width:100%; clear:both; margin-top:50px; background:#fff; border:1px solid green" id="upload_form" enctype="multipart/form-data" class="form" action="" method="post">
    <fieldset>
        <input name="somefield" style="display:none" value="">
        <ul style="width:100%; padding:0 20px">

            <li>
                <label>Upload</label>
                <input  type="file" name="upload" id="upload" required accept=".pdf, .doc"/>
            </li>

            <li>
                <label>Language </label>
                <select name="language">
                <!-- SOME OPTIONS -->
                </select>
            </li>

            <li>
                <label>Category </label>
                <select name="category">
                 <!--SOME OPTIONS-->
                </select>
            </li>

            <li class="privacy">
                <input style="margin-top:22px; " name="submit2" class="button" type="submit" value="Save" />
            </li>
        </ul>
    </fieldset>
</form>

As you can see there is a Files input and two dropdown. I need to pass these informations to a php file called 'upload' via Ajax.

so i write this script in Jquery:

    $(document).ready(function() 
    {  
        // Form Upload
        var uploadForm = $("#upload_form");
        var formData = new FormData(uploadForm[0]);
        // submit action
        uploadForm.submit(function(e) {
            e.preventDefault();

            $.ajax({
                url: 'upload.php',
                data: formData,
                type: 'POST',
                contentType: false,
                processData: false,
                success: function(d) {
                    alert(d);
                }
            });

        });         
    } 
); 

And for testing this is what there's in my upload.php file

print_r($_FILES); die(); // Testing 

In the alert box i receive this output:

  Array
(
    [upload] => Array
        (
            [name] => 
            [type] => 
            [tmp_name] => 
            [error] => 4 // In the documentation the error 4 is for file not uploaded
            [size] => 0
        )

)

How can i submit all the form in the same Ajax Call? Is this the correct way to do it? Should i set two different ajax call?

Thanks for all the help.

1
  • Check out this. Commented Aug 29, 2016 at 9:26

1 Answer 1

0

Ok, i've found the solution. It was a stupid mistake i made.

This is the correct script:

    // Form Upload 
    var uploadForm = $("#upload_form");

    uploadForm.submit(function(e) {
        e.preventDefault();
        // Moved inside  
        var formData = new FormData(uploadForm[0]); 
        console.log(formData);

        $.ajax({
            url: 'function/upload.php',
            data: formData,
            type: 'POST',
            contentType: false,
            processData: false,
            success: function(d) {
                console.log(d);
            }
        });

    });

and it gives me this output:

    Array
(
    [upload] => Array
        (
            [name] => somefile.pdf
            [type] => application/pdf
            [tmp_name] => /tmp/phpB3t2vF
            [error] => 0
            [size] => 2444
        )

)
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.