Ajax File Upload using JQuery


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



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.