initial commit

rishiv3 · Nov 19, 2015 · cbeed0c · cbeed0c
1 parent 027123a
commit cbeed0c
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 0 deletions.
diff --git a/ajax_php_file.php b/ajax_php_file.php
@@ -0,0 +1,37 @@
+<?php
+if(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"] < 10000000)//Approx. 10000kb 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>";
+}
+}
+?>
diff --git a/index.php b/index.php
@@ -0,0 +1,34 @@
+<html>
+    <head>
+		<meta name="robots" content="noindex, nofollow">
+        <title>Ajax Image Upload Using PHP and jQuery</title>
+        <link rel="stylesheet" href="style.css" />
+		<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+        <script src="script.js"></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="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 src="loading_circle.gif"/>&nbsp;&nbsp;Loading...</h4>
+		<div id="message"> 			
+        </div>
+    </body>
+</html>           
+              
+             
+                     
+             
+           
+
diff --git a/loading_circle.gif b/loading_circle.gif
diff --git a/noimage.png b/noimage.png
diff --git a/script.js b/script.js
@@ -0,0 +1,49 @@
+$(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 representing form fields and values 
+			contentType: false,       		// The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
+    	    cache: false,					// To unable request pages to be cached
+			processData:false,  			// To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
+			success: function(data)  		// A function to be called if request succeeds
+		    {
+			$('#loading').hide();
+			$("#message").html(data);			
+		    }	        
+	   });
+	}));
+
+// Function to preview image
+	$(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','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');
+	};
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,107 @@
+body {
+font-family: 'Raleway', 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{
+position: absolute;
+font-size: 30px;
+top: 100px;
+left: 100px;
+width: 250px;
+height: 230px;
+text-align: center;
+line-height: 180px;
+font-weight: bold;
+color: #C0C0C0;
+background-color: #FFFFFF;
+overflow: auto;
+}
+#selectImage{
+padding: 22px 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;
+margin-top: 10px;
+border-radius: 5px;
+margin-left: 14%;
+width: 72%;
+}
+#message{
+position:absolute;
+top:120px;
+left:815px;
+}
+#success
+{
+color:green;
+}
+#invalid
+{
+color:red;
+}
+#line 
+{
+margin-top:288px;
+}
+#error
+{
+color:red;
+}
+#error_message
+{
+color:blue;
+}
+#loading
+{
+display:none;
+position:absolute;
+top:50px;
+left:850px;
+font-size:25px;
+}
diff --git a/upload/index.html b/upload/index.html