Advanced Search

Ajax File Upload using JQuery

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*** AJAX UPLOAD PROFILE IMAGE - STARTS ***/
  2. 	function profileImgUpload(form_obj)
  3. 	{			
  4. 		var fileToUpload = $("input#profile_image").val();
  5. 		// first hide any error messages
  6. 		$('.error').hide();
  7. 		if (fileToUpload == "") {
  8. 		  $("label#profile_image_error").show();
  9. 		  $("label#profile_image_error").html('This field is Required');	
  10. 		  $("input#profile_image").focus();	  
  11. 		  return false;
  12. 		}		  
  13. 		else if(validateImageFile(fileToUpload) == false) {
  14. 		  $("label#profile_image_error").show();
  15. 		  $("label#profile_image_error").html('Invalid file type');	
  16. 		  $("input#profile_image").focus();	  
  17. 		  return false;
  18. 		}		  
  19. 		else
  20. 		{ 	
  21. 			$("#fade_f").hide();
  22. 			$("#popup_label").hide();
  23.  
  24. 			$("#profile_image_div").ajaxStart(function(){
  25. 				$(this).html('<img src="images/default/community/ajax-loader.gif" />');
  26. 			})
  27. 			.ajaxComplete(function(){
  28. 				//$(this).html('');
  29. 			});
  30.  
  31. 			$.ajaxFileUpload
  32. 			(
  33. 				{
  34. 					url:'ajax_profile_image_upload.php',
  35. 					secureuri:false,
  36. 					fileElementId:'profile_image',
  37. 					dataType: 'json',
  38. 					success: function (data, status)
  39. 					{
  40. 						if(typeof(data.error) != 'undefined')
  41. 						{
  42. 							if(data.error != '')
  43. 							{
  44. 								alert(data.error);
  45. 							}else
  46. 							{
  47. 								var output = data.msg.split('#@#');	
  48. 								$("#profile_image_div").html(output[0]);								
  49. 								$("#hidden_image").val(output[1]);								
  50. 							}
  51. 						}
  52. 					},
  53. 					error: function (data, status, e)
  54. 					{
  55. 						alert(e);
  56. 					}
  57. 				}
  58. 			)		
  59. 			return false;
  60. 		}
  61.  
  62. 	}
  63. /* ----- ENDS ----- */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.