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

[imgrooot]

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>

[Ch0cu3r]

 

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).