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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax Image Upload using PHP and jQuery</title><script>$(document).ready(function (e) {$("#uploadimage").on('submit',(function(e) { e.preventDefault(); $("#message").empty(); $('#loading').show(); $.ajax({ url: "ajax_php_file.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) contentType: false, // The content type used when sending data to the server. cache: false, // To unable request pages to be cached processData:false, // To send DOMDocument or non processed data file it is set to false success: function(data) // A function to be called if request succeeds { $('#loading').hide(); $("#message").html(data); } });}));// Function to preview image after validation$(function() { $("#file").change(function() { $("#message").empty(); // To remove the previous error message var file = this.files[0]; var imagefile = file.type; var match= ["image/jpeg","image/png","image/jpg"]; if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))) { $('#previewing').attr('src','img/noimage.png'); $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>"); return false; } else { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } });});function imageIsLoaded(e) { $("#file").css("color","green"); $('#image_preview').css("display", "block"); $('#previewing').attr('src', e.target.result); $('#previewing').attr('width', '250px'); $('#previewing').attr('height', '230px');};});</script></head><body><div class="main"><h1>Ajax Image Upload</h1><br/><hr><form id="uploadimage" action="" method="post" enctype="multipart/form-data"><div id="image_preview"><img id="previewing" src="img/noimage.png"/></div><hr id="line"><div id="selectImage"><label>Select Your Image</label><br/><input type="file" name="file" id="file" required /><input type="submit" value="Upload" class="submit" /></div></form></div><h4 id='loading'><img id="previewing" src="img/loader.gif"/> Loading..</h4><div id="message"></div><style>body {font-family: 'Roboto Condensed', sans-serif;}h1{text-align: center;background-color: #FEFFED;height: 70px;color: rgb(95, 89, 89);margin: 0 0 -29px 0;padding-top: 14px;border-radius: 10px 10px 0 0;font-size: 35px;}.main {position: absolute;top: 50px;left: 20%;width: 450px;height:530px;border: 2px solid gray;border-radius: 10px;}.main label{color: rgba(0, 0, 0, 0.71);margin-left: 60px;}#image_preview{width:100%;height:auto;text-align: center;color: #C0C0C0;overflow: auto;}#selectImage{padding: 19px 21px 14px 15px;position: absolute;bottom: 0px;width: 414px;background-color: #FEFFED;border-radius: 10px;}.submit{font-size: 16px;background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);border: 1px solid #e5a900;color: #4E4D4B;font-weight: bold;cursor: pointer;width: 300px;border-radius: 5px;padding: 10px 0;outline: none;margin-top: 20px;margin-left: 15%;}.submit:hover{background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);}#file {color: red;padding: 5px;border: 5px solid #8BF1B0;background-color: #8BF1B0;margin-top: 10px;border-radius: 5px;box-shadow: 0 0 15px #626F7E;margin-left: 15%;width: 72%;}#message{position:absolute;top:120px;left:815px;}#success{color:green;}#invalid{color:red;}#line{margin-top: 274px;}#error{color:red;}#error_message{color:blue;}#loading{display:none;position:absolute;top:50px;left:850px;font-size:25px;}</style></body></html> |
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 | <?phpif(isset($_FILES["file"]["type"])){ $validextensions = array("jpeg", "jpg", "png"); $temporary = explode(".", $_FILES["file"]["name"]); $file_extension = end($temporary); if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg") ) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded. && in_array($file_extension, $validextensions)) { if ($_FILES["file"]["error"] > 0){ echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>"; }else{ if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> "; }else{ $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable $targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>"; echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; } } }else{ echo "<span id='invalid'>***Invalid file Size or Type***<span>"; }}?> |
