Hello Friends, Today I am going to share File Uploading using Ajax code in PHP. There is three methods in the code by which file can be uploaded using Ajax which are :
- Uploading With Form Tag
- Uploading Without Form Tag
- Uploading Without Form Tag Without Submit Button
Here is the code
PHP code to Handle File Upload Request
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<?php define("ERROR_RESPONSE_CODE", "1"); define("SUCCESS_RESPONSE_CODE", "0"); $action = $_REQUEST['action']; if ($action == 'uploadfile') { $response['code'] = ERROR_RESPONSE_CODE; $upload_path = 'uploads/'; $upload_url = $upload_path; if ($_SERVER['REQUEST_METHOD'] == 'POST') { //checking the required parameters from the request if (isset($_FILES['file']['name'])) { $fileinfo = pathinfo($_FILES['file']['name']); $extension = $fileinfo['extension']; $filename = time(); $file_url = $upload_url . $filename . '.' . $extension; //file path to upload in the server $file_path = $upload_path . $filename . '.' . $extension; try { //saving the file if(move_uploaded_file($_FILES['file']['tmp_name'], $file_path)) { $response['code'] = SUCCESS_RESPONSE_CODE; $response['file_url'] = $file_url; $response['msg'] = 'Uploaded successfully!'; $response['htmlmsg'] = '<div class="alert alert-success">Uploaded successfully!</div>'; } } catch (Exception $e) { $response['code'] = ERROR_RESPONSE_CODE; $response['msg'] = 'Error!'; $response['htmlmsg'] = '<div class="alert alert-danger">Error!</div>'; } } else { $response['code'] = ERROR_RESPONSE_CODE; $response['msg'] = 'Please choose file!'; $response['htmlmsg'] = '<div class="alert alert-danger">Please choose file!</div>'; } } header("Content-Type:application/json"); echo json_encode($response); exit(); } |
Note: Here I am using just simple upload code, you can add validation codes for file size, file type, etc.
HTML & Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" style="width: 100%;"> <tr> <td> <h4>Uploading With Form Tag</h4> <form id="form" method="post" enctype="multipart/form-data"> <input class="btn" type="file" name="file" required> <input type="submit" name="upload" value="Upload"/> </form> </td> <td> <h4>Uploading Without Form Tag</h4> <input id="fileinput1" type="file"> <input id="uploadfilebtn" type="submit" name="upload" value="Upload"/> </td> <td> <h4>Uploading Without Form Tag Without Submit Button</h4> <input id="fileinput" type="file"> </td> </tr> <tr> <td colspan="3"> <span id="uploadingmsg"></span> </td> </tr> </table> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function () { $("#form").submit(function (e) { e.preventDefault(); var action = "requests.php?action=uploadfile"; $("#uploadingmsg").html("Uploading..."); var data = new FormData(e.target); $.ajax({ type: 'POST', url: action, data: data, /*THIS MUST BE DONE FOR FILE UPLOADING*/ contentType: false, processData: false, }).done(function (data) { $("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>"); if (data.code === '0') { $("#uploadingmsg").append("File Url: " + data.file_url + "<br/>"); } }).fail(function (data) { //any message }); }); $("#uploadfilebtn").click(function (e) { e.preventDefault(); var action = "requests.php?action=uploadfile"; if ($("#fileinput1").val() === "") { return; } $("#uploadingmsg").html("Uploading..."); var data = new FormData(); data.append("file", $('input[type=file]')[1].files[0]); $.ajax({ type: 'POST', url: action, data: data, /*THIS MUST BE DONE FOR FILE UPLOADING*/ contentType: false, processData: false, }).done(function (data) { $("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>"); if (data.code === '0') { $("#uploadingmsg").append("File Url: " + data.file_url + "<br/>"); } }).fail(function (data) { //any message }); }); $("#fileinput").change(function (e) { e.preventDefault(); var action = "requests.php?action=uploadfile"; if ($("#fileinput2").val() === "") { return; } $("#uploadingmsg").html("Uploading..."); var data = new FormData(); data.append("file", $('input[type=file]')[2].files[0]); $.ajax({ type: 'POST', url: action, data: data, /*THIS MUST BE DONE FOR FILE UPLOADING*/ contentType: false, processData: false, }).done(function (data) { $("#uploadingmsg").html("Code: " + data.code + "<br/>Message: " + data.msg + "<br/>"); if (data.code === '0') { $("#uploadingmsg").append("File Url: " + data.file_url + "<br/>"); } }).fail(function (data) { //any message }); }); }); </script> </body> </html> |
Output
NetBeans Project Download
File Uploading Using Ajax
1 file(s) 3.09 KB
Thank you Friends
Please share if you like it
Comments