Question

42

Form submit to upload file and also other fields using ajax

rated 0 times [ 48] [ 6] / answers: 1 / hits: 8636 / 10 Years ago, thu, march 20, 2014, 12:00:00

I have tested every question here and have also googled alot, but did not find the something that work.

Here is my HTML:

<div id=createarea>

    <form id=createform action=index/create/createcontrols.php method=post enctype=multipart/form-data>

      <input id=title type=text name=title size=30 value=Title><br><br>

      <input id=description type=text name=description size=30 value=Description><br><br>

      <input id=keywords type=text name=keywords size=30 value=Keywords><br><br>

      <input id=link type=text name=link size=30 value=Link><br><br>

      <input id=file type=file name=file><br><br>

      <input id=submit type=button name='submit' value=Create onclick=myFunction()>

    </form>

    <div id=createformresults>

    </div>

</div>

And here is the javascript:

function myFunction() {

  $(function () {

    $('#createform').on('submit', function (e) {

      $.ajax({

        type: 'post',

        url: 'index/create/createcontrols.php',

        data: $('#createform').serialize(),

        success: function () {

          document.getElementById('createarea').innerHTML = SUCCESS;

        }

      });

      e.preventDefault();

    });

  });

}

MY PHP CODE:

 <?php











$db=mysql_connect('','','') or die(mysql_error());

mysql_select_db(, $db) or die(mysql_error());









$title = $_POST[title];

$description = $_POST[description];

$keywords = $_POST[keywords];

$link = $_POST[link];

        $image=$_FILES[file][name];





        $allowedExts = array(gif, jpeg, jpg, png);

$temp = explode(., $_FILES[file][name]);

$extension = end($temp);

if ((($_FILES[file][type] == image/gif) || ($_FILES[file][type] == image/jpeg) || ($_FILES[file][type] == image/jpg) || ($_FILES[file][type] == image/pjpeg) || ($_FILES[file][type] == image/x-png) || ($_FILES[file][type] == image/png)) && ($_FILES[file][size] < 20000) && in_array($extension, $allowedExts)) {



    if ($_FILES[file][error] > 0) {



        echo Return Code:  . $_FILES[file][error] . <br>;



        }



        else {



                if (file_exists(temp/ . $_FILES[file][name])) {

                echo $_FILES[file][name] .  already exists. ;

                }



            else {

                move_uploaded_file($_FILES[file][tmp_name], temp/ . $_FILES[file][name]);

            }

        }

}



else { 



    echo Invalid file; 



             }





            $qry=insert createcontent values('null','$title','$description','$keywords','$link','$image');



            $res=  mysql_query($qry) or die(mysql_error());



            if(mysql_affected_rows()==1) {



                    echo Success; 



            }  



else {



    echo Not Saved;                    



}







 ?>

PHP code is working fine the issue is somewhere in js file.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kylanalis

Add To Favorites

Follow

Total Points: 438

Total Questions: 85

Total Answers: 102

Location: Barbados

Member since Sun, Nov 27, 2022

1 Year ago

kylanalis questions

1 How to pass State in Context React

Sat, Oct 2, 21, 00:00, 3 Years ago

1 How to get rid of or remove spinners/arrows in react-select?

Tue, Oct 13, 20, 00:00, 4 Years ago

1 [NodeJs][Sequelize] ReferenceError: Cannot access 'ModelName' before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 How can I load a local image in THREE.js?

Thu, Feb 13, 20, 00:00, 4 Years ago

1 trigger('change') is not working on Select

Tue, Jan 7, 20, 00:00, 4 Years ago

View All

answered 10 Years ago jesse · Accepted Answer

I would use FormData for this task.

Here is an example of your code using FormData :

$(function () { //On dom ready:



$(#createform).submit(function (e) { //will be triggered on submit:



     e.preventDefault();



     if( window.FormData !== undefined ) 

     //make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3  gecko mobile > 2, opera mobile >12 <- wil support XHR too

     {



         var formData = new FormData($('#createform')[0]); // use [0] <- important

    // you can append aditional values (regular text): formData.append(be,some value);

         $.ajax({

                 url: 'index/create/createcontrols.php',  //Server script to process data

                 type: 'POST',

                 data: formData,

                 xhr: function() {  },

                 success: function(response){ $(#createformresults).text(SUCCESS); },

                 error: function (jqXHR, textStatus, errorThrown) { $(#createformresults).text(errorThrown); },

                 //Options to tell jQuery not to process data or worry about content-type.

                 cache: false,

                 contentType: false,

                 processData: false

          });

      } else {



          //Fallback



      }



      return false;

});



});

FormData will support multi file upload!

Add to your Form tag the attribute: enctype=multipart/form-data

NOTE: You may find that the $_FILES array is empty on server side page - In this case you need to make sure your server configuration allows file uploads, size limit of file upload is enough, post time
is enough etc....

The best way to begin is to make sure that file uploads is allowed and then testing with very
small files to be sure everything in your code is OK.