/ Published in: jQuery
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.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/******************************************************************* JS - PREVIEW IMAGE BY JQUERY4U - http://jquery4u.com article: http://www.jquery4u.com/tutorials/thumbnail-image-upload-ajaxphp/ *******************************************************************/ function previewImage(str) { //alert(str); ajaxFileUpload(); } function removeImage() { //alert("Image Removed"); $("#imagethumb").html(''); $("#removebutton").hide(); $("#supportedfiles").show(); var tid = $("Input[name=allocatedimagename]").val(); //remove the temporary image files created by the image $.get("/php/deleteblogthumb.php",{thumb_name: tid, type: 'js-<a href="http://blogoola.com" title="Submit your blog">blog</a>'}, function(data){ //alert(data); }); $("Input[name=allocatedimagename]").val(''); $("Input[name=blogpic]").val(''); } function ajaxFileUpload() { //starting setting some animation when the ajax starts and completes $("#loading") .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }); /* prepareing ajax file upload url: the url of script file handling the uploaded files fileElementId: the file type of input element id and it will be the index of $_FILES Array() dataType: it support json, xml secureuri:use secure protocol success: call back function when the ajax complete error: callback function when the ajax failed */ $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'blogpic', dataType: 'json', success: function (data, status) { if(typeof(data.error) != 'undefined') { if(data.error != '') { alert(data.error); }else { //alert(data.loc); //show the preview of image 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>'; $("#imagethumb").html(imageloc); //add $("#removebutton").show(); $("#supportedfiles").hide(); //save the allocated image name for use with the process signup script $("Input[name=allocatedimagename]").val(data.loc); } } }, error: function (data, status, e) { alert(e); } } ) return false; }
URL: http://www.jquery4u.com/tutorials/thumbnail-image-upload-ajaxphp/