jQuery file upload is a simple and efficient way to enhance user experience on your website. In this guide, I’ll walk you through how to upload a file using AJAX and jQuery, providing a modern and responsive approach to handling file uploads.<\/p>\n\n\n\n
Step 1: Setting Up jQuery<\/strong><\/p>\n\n\n\n First, ensure you have the latest jQuery library. You can download it from the official jQuery website or include it directly from Google’s CDN. While using a CDN is convenient, for production environments, it’s recommended to host the jQuery file locally on your server.<\/p>\n\n\n\n Step 2: HTML Structure<\/strong><\/p>\n\n\n\n Create a simple HTML structure with an input field for file selection and a button to trigger the upload process.<\/p>\n\n\n\n In this setup, the Step 3: JavaScript Functions for Handling File Upload<\/strong><\/p>\n\n\n\n Define the necessary JavaScript functions to handle the file selection and upload using AJAX.<\/p>\n\n\n\n Here, Step 4: Server-Side File Handling with PHP<\/strong><\/p>\n\n\n\n On the server side, you’ll need a PHP script to handle the incoming file upload request. This script will save the uploaded file and return a response.<\/p>\n\n\n\n In this script, we validate the file type and size before saving it to the server. If the file meets the criteria, it is saved in the “upload” directory, and a success message is returned. Otherwise, an error message is displayed.<\/p>\n\n\n\n Step 5: Testing the File Upload Feature<\/strong><\/p>\n\n\n\n Create the HTML and PHP files as described and place them in your local server environment (e.g., XAMPP, WAMP). Open the HTML file in your browser and test the file upload functionality. Ensure your “upload” directory has appropriate permissions for file writing.<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" “Upgrade your web forms with jQuery and AJAX for seamless file uploads. This article provides detailed instructions and code examples to help you get started.”<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-246","post","type-post","status-publish","format-standard","hentry","category-jquery"],"_links":{"self":[{"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":3,"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":326,"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/posts\/246\/revisions\/326"}],"wp:attachment":[{"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptut.com\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<head>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"><\/script>\n<\/head>\n<\/code><\/pre>\n\n\n\n<body>\n <div>\n <label for=\"my_image\">Upload Image<\/label>\n <input type=\"file\" name=\"my_image\" id=\"my_image\" onChange=\"onChangeHandler(event)\" \/>\n <\/div>\n <div>\n <input type=\"button\" value=\"Upload\" name=\"upload_file\" onClick=\"saveFile()\" \/>\n <\/div>\n <div id=\"results\"><\/div>\n<\/body><\/code><\/pre>\n\n\n\nonChangeHandler<\/code> function captures the selected file, and the saveFile<\/code> function handles the file upload.<\/p>\n\n\n\n<script>\n const data = new FormData();\n\n function onChangeHandler(event) {\n data.append('file', event.target.files[0]);\n }\n\n function saveFile() {\n $.ajax({\n type: \"POST\",\n url: 'uploadfile.php',\n data: data,\n contentType: false,\n processData: false,\n success: function(response) {\n $(\"#results\").html(response);\n },\n error: function(jqXHR, textStatus, errorThrown) {\n $(\"#results\").html(`<p>Error: ${textStatus}<\/p>`);\n }\n });\n }\n<\/script><\/code><\/pre>\n\n\n\nFormData<\/code> <\/strong>is used to construct a set of key\/value pairs representing form fields and their values, which can then be easily sent using the $.ajax<\/strong><\/code> method. The contentType<\/code> <\/strong>and processData<\/code> <\/strong>options must be set to false<\/code> <\/strong>to correctly send the file data.<\/p>\n\n\n\n<?php\nif ($_FILES) {\n $allowedExts = array(\"gif\", \"jpeg\", \"jpg\", \"png\");\n $temp = explode(\".\", $_FILES[\"file\"][\"name\"]);\n $extension = end($temp);\n\n if ((($_FILES[\"file\"][\"type\"] == \"image\/gif\")\n || ($_FILES[\"file\"][\"type\"] == \"image\/jpeg\")\n || ($_FILES[\"file\"][\"type\"] == \"image\/jpg\")\n || ($_FILES[\"file\"][\"type\"] == \"image\/pjpeg\")\n || ($_FILES[\"file\"][\"type\"] == \"image\/x-png\")\n || ($_FILES[\"file\"][\"type\"] == \"image\/png\"))\n && ($_FILES[\"file\"][\"size\"] < 2000000)\n && in_array($extension, $allowedExts)) {\n if ($_FILES[\"file\"][\"error\"] > 0) {\n echo \"Return Code: \" . $_FILES[\"file\"][\"error\"] . \"<br>\";\n } else {\n $filename = \"upload\/\" . $_FILES[\"file\"][\"name\"];\n move_uploaded_file($_FILES[\"file\"][\"tmp_name\"], $filename);\n echo json_encode(array(\n \"status\" => \"success\",\n \"message\" => \"File uploaded successfully!\",\n \"path\" => $filename\n ));\n }\n } else {\n echo json_encode(array(\n \"status\" => \"error\",\n \"message\" => \"Invalid file\"\n ));\n }\n}\n?>\n\n<\/code><\/pre>\n\n\n\n\n