Show Thumbnail of Image Upload AJAX/PHP


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

This is how you can add a file/image upload tool to your forms and have AJAX store the file with PHP and return a thumbnailed version to the user for display on the form. Nice.


Copy this code and paste it in your HTML
  1. /*******************************************************************
  2.   JS - PREVIEW IMAGE
  3. BY JQUERY4U - http://jquery4u.com
  4. article: http://www.jquery4u.com/tutorials/thumbnail-image-upload-ajaxphp/
  5. *******************************************************************/
  6. function previewImage(str) {
  7. //alert(str);
  8. ajaxFileUpload();
  9. }
  10.  
  11. function removeImage() {
  12. //alert("Image Removed");
  13. $("#imagethumb").html('');
  14. $("#removebutton").hide();
  15. $("#supportedfiles").show();
  16. var tid = $("Input[name=allocatedimagename]").val();
  17. //remove the temporary image files created by the image
  18. $.get("/php/deleteblogthumb.php",{thumb_name: tid, type: 'js-<a href="http://blogoola.com" title="Submit your blog">blog</a>'}, function(data){
  19. //alert(data);
  20. });
  21.  
  22. $("Input[name=allocatedimagename]").val('');
  23. $("Input[name=blogpic]").val('');
  24. }
  25.  
  26. function ajaxFileUpload() {
  27. //starting setting some animation when the ajax starts and completes
  28. $("#loading")
  29. .ajaxStart(function(){
  30. $(this).show();
  31. })
  32. .ajaxComplete(function(){
  33. $(this).hide();
  34. });
  35.  
  36. /*
  37.   prepareing ajax file upload
  38.   url: the url of script file handling the uploaded files
  39.   fileElementId: the file type of input element id and it will be the index of $_FILES Array()
  40.   dataType: it support json, xml
  41.   secureuri:use secure protocol
  42.   success: call back function when the ajax complete
  43.   error: callback function when the ajax failed
  44.  
  45.   */
  46. $.ajaxFileUpload
  47. (
  48. {
  49. url:'doajaxfileupload.php',
  50. secureuri:false,
  51. fileElementId:'blogpic',
  52. dataType: 'json',
  53. success: function (data, status)
  54. {
  55. if(typeof(data.error) != 'undefined')
  56. {
  57. if(data.error != '')
  58. {
  59. alert(data.error);
  60. }else
  61. {
  62. //alert(data.loc);
  63. //show the preview of image
  64. var imageloc = '<span class="normaltext">Your uploaded image: <samp>'+data.name+'('+data.size+'kb)'+'</samp><br><img class="small blogthumb" src="'+data.loc+'" height="40" width="40" alt="your uploaded image"></span>';
  65. $("#imagethumb").html(imageloc); //add
  66. $("#removebutton").show();
  67. $("#supportedfiles").hide();
  68. //save the allocated image name for use with the process signup script
  69. $("Input[name=allocatedimagename]").val(data.loc);
  70. }
  71. }
  72. },
  73. error: function (data, status, e)
  74. {
  75. alert(e);
  76. }
  77. }
  78. )
  79.  
  80. return false;
  81.  
  82. }

URL: http://www.jquery4u.com/tutorials/thumbnail-image-upload-ajaxphp/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.