Jump to content
Sign in to follow this  
imgrooot

Is there a way to pass the php script through ajax, as oppose to form action?

Recommended Posts

I am trying out a new script for image upload and resize using ajax method.  All the ones I've found so far process the php file through the form action="".  Since I am inserting other data into the database and calling the other php code directly on the same page as a the html form, I would like to know if there is another way I can run that specific image upload php code through ajax.

This is one the scripts I have looked at .

 

http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php

 

This is what their html form looks like.

<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
   <input name="image_file" id="imageInput" type="file" />
   <input type="submit"  id="submit-btn" value="Upload" />
   <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="output"></div>

I would like to process the "processupload.php" above through the ajax code below and leave the form action="" empty, as I am running other php code on the same page to insert other data as well.

How would you do that?

<script>
	$(document).ready(function() { 
		var options = { 
				target: '#output',   // target element(s) to be updated with server response 
				beforeSubmit: beforeSubmit,  // pre-submit callback 
				success: afterSuccess,  // post-submit callback 
				resetForm: true        // reset the form after successful submit 
			}; 
			
		 $('#MyUploadForm').submit(function() { 
				$(this).ajaxSubmit(options);  			
				// always return false to prevent standard browser submit and page navigation 
				return false; 
			}); 
	}); 

	function afterSuccess()
	{
		$('#submit-btn').show(); //hide submit button
		$('#loading-img').hide(); //hide submit button

	}

	//function to check file size before uploading.
	function beforeSubmit(){
		//check whether browser fully supports all File API
	   if (window.File && window.FileReader && window.FileList && window.Blob)
		{
			
			if( !$('#imageInput').val()) //check empty input filed
			{
				$("#output").html("Are you kidding me?");
				return false
			}
			
			var fsize = $('#imageInput')[0].files[0].size; //get file size
			var ftype = $('#imageInput')[0].files[0].type; // get file type
			

			//allow only valid image file types 
			switch(ftype)
			{
				case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
					break;
				default:
					$("#output").html("<b>"+ftype+"</b> Unsupported file type!");
					return false
			}
			
			//Allowed file size is less than 1 MB (1048576)
			if(fsize>1048576) 
			{
				$("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.");
				return false
			}
					
			$('#submit-btn').hide(); //hide submit button
			$('#loading-img').show(); //hide submit button
			$("#output").html("");  
		}
		else
		{
			//Output error to older browsers that do not support HTML5 File API
			$("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
			return false;
		}
	}

	//function to format bites bit.ly/19yoIPO
	function bytesToSize(bytes) {
	   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
	   if (bytes == 0) return '0 Bytes';
	   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
	   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
	}

	</script>

Share this post


Link to post
Share on other sites

 

Since I am inserting other data into the database and calling the other php code directly on the same page as a the html form

What do you mean by that? By the time you see the HTML form PHP has done processing, the data would of already been inserted into your database. PHP runs on the server, what you see in the browser is the output of your PHP code.

 

 

All the ones I've found so far process the php file through the form action=""

The form action is there so the web browser knows where to submit the form data to. Setting the action to a blank value will make the browser submit the form data to itself (the current page you are on - You will have to include the PHP processing code in same page).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.