Ajax file upload form.
We once wrote on How to upload files on your website using a form. Using that method, we noticed that the whole webpage will have to refresh before the form is submitted which might not be a good experience in modern web applications.
Ajax file uploads.
The advantages of his method is that the page won’t have to refresh itself all the time and it is more user-friendly than the other.
Let’s start with creating our database using the phpmyadmin tool in XAMPP.
Creating your MySQL database.
You can easily create your database using the phpmyadmin tool. this is usually found in your cpanel of your website. If you’re using localhost, you can start your Apache servers and type “http://localhost/phpmyadmin“.
The “http://” isn’t necessary, you can skip it if you need to.
We have decided to name our database charmingdesk. Now we’ll create a table in our database, this table will be named “filepaths” which will have 3 columns, “id”, “name” and “paths”.
Now that we’ve created our table, it’s time to move over to our index.php page which well create our HTML form.
Creating our file upload form.
<form method="post" action="submit.php" enctype="multipart/form-data"
<label for="fpath"> file path:</label>
<input type="file" id="fpath" name="fpath"><br><br>
<input type="button" name="Submit"
Note: type of the submit button should be set to button.
//Select the element with id (myform).
//Compile all form inputs into a variable.
var fd=new formData(myform);
//Now let's send the inputs to our php script named processform.php to handle the php processing.
Let me explain the above block of code here.
- Type– used to set the forms submit method, we used “post” because a file upload is involved. If it was just text then “Get” method is preferable.
- url: the file path of the script where we want to submit the form values to. This is similar to the action attribute in the form tag.
- data: the items you want to submit in the form, we’ve already compiled our form inputs into one variable which we submitted previously.
- Process type and content type: they are compulsory when file inputs are involved and they should always be set to false.
- Success: This is used to display the results from the processing page if the sending was successful.
Now let’s process our form in the “processform.php” script which handles the uploads and storage.
First we create a file named “processform.php” and connect it to our database.
$conn=mysqli_query ("hostname", "username", "password", "database name");
The host name is usually localhost, then the rest is given to you by your web hosting company.
If you're using a localhost server, then the following applies for you
username = "root"
password = "" //empty
Database name="your database name".
Here we decided to use charming desk as our database name.
Now that we’ve connected the script to our database, let’s continue with the processing.
//Stores the actual file name
//Stores the initial file path
move_uploaded_file ($path, $newpath)
echo "file uploaded successfully";
//Insert to database.
mysqli_query($conn,"INSERT INTO filepaths (name,path)VALUES ('$iname','$newpath')");
echo "file upload successful.";
echo "an error occurred";
We’ve come to the end of this article, feel free to follow us on Facebook and Instagram to stay updated with our latest posts.
You can also mail us at our official email address email@example.com for a private reply.