Ajax Download Picture

Question

Q.1 I would like to convert this form to ajax, but it seems to me that my ajax code is missing something. On submit does nothing.

Q2. I also want the function to run on change when the file was selected, so as not to wait for sending.

Here is the JS.

$('#imageUploadForm').on('submit',(function(e) { e.preventDefault() $.ajax({ type:'POST', url: $(this).attr('action'), data:$(this).serialize(), cache:false }); })); 

and HTMl with php.

 <form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> <input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/> <input type="submit" name="upload" value="Upload" /> <img width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/> </form> 

Answer 1

first, in your ajax call, enable the success and error function, and then check if it gives you an error or what?

your code should look like this

 $(document).ready(function (e) { $('#imageUploadForm').on('submit',(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ type:'POST', url: $(this).attr('action'), data:formData, cache:false, contentType: false, processData: false, success:function(data){ console.log("success"); console.log(data); }, error: function(data){ console.log("error"); console.log(data); } }); })); $("#ImageBrowse").on("change", function() { $("#imageUploadForm").submit(); }); }); 

Answer 2

HTML code

 <div class="rCol"> <div id ="prv" style="height:auto; width:auto; float:left; margin-bottom: 28px; margin-left: 200px;"></div> </div> <div class="rCol" style="clear:both;"> <label > Upload Photo : </label> <input type="file" id="file" name='file' onChange=" return submitForm();"> <input type="hidden" id="filecount" value='0'> 

Here is the Ajax code:

 function submitForm() { var fcnt = $('#filecount').val(); var fname = $('#filename').val(); var imgclean = $('#file'); if(fcnt<=5) { data = new FormData(); data.append('file', $('#file')[0].files[0]); var imgname = $('input[type=file]').val(); var size = $('#file')[0].files[0].size; var ext = imgname.substr( (imgname.lastIndexOf('.') +1) ); if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG') { if(size<=1000000) { $.ajax({ url: "<?php echo base_url() ?>/upload.php", type: "POST", data: data, enctype: 'multipart/form-data', processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType }).done(function(data) { if(data!='FILE_SIZE_ERROR' || data!='FILE_TYPE_ERROR' ) { fcnt = parseInt(fcnt)+1; $('#filecount').val(fcnt); var img = '<div class="dialog" id ="img_'+fcnt+'" ><img src="<?php echo base_url() ?>/local_cdn/'+data+'"><a href="#" id="rmv_'+fcnt+'" onclick="return removeit('+fcnt+')" class="close-classic"></a></div><input type="hidden" id="name_'+fcnt+'" value="'+data+'">'; $('#prv').append(img); if(fname!=='') { fname = fname+','+data; }else { fname = data; } $('#filename').val(fname); imgclean.replaceWith( imgclean = imgclean.clone( true ) ); } else { imgclean.replaceWith( imgclean = imgclean.clone( true ) ); alert('SORRY SIZE AND TYPE ISSUE'); } }); return false; }//end size else { imgclean.replaceWith( imgclean = imgclean.clone( true ) );//Its for reset the value of file type alert('Sorry File size exceeding from 1 Mb'); } }//end FILETYPE else { imgclean.replaceWith( imgclean = imgclean.clone( true ) ); alert('Sorry Only you can uplaod JPEG|JPG|PNG|GIF file type '); } }//end filecount else { imgclean.replaceWith( imgclean = imgclean.clone( true ) ); alert('You Can not Upload more than 6 Photos'); } } 

Here is the PHP code:

 $filetype = array('jpeg','jpg','png','gif','PNG','JPEG','JPG'); foreach ($_FILES as $key ) { $name =time().$key['name']; $path='local_cdn/'.$name; $file_ext = pathinfo($name, PATHINFO_EXTENSION); if(in_array(strtolower($file_ext), $filetype)) { if($key['name']<1000000) { @move_uploaded_file($key['tmp_name'],$path); echo $name; } else { echo "FILE_SIZE_ERROR"; } } else { echo "FILE_TYPE_ERROR"; }// Its simple code.Its not with proper validation. 

Download and view the done.Now part here, if you want to delete and delete the image from the page and folder, then both codes are here for deletion. Ajax part:

 function removeit (arg) { var id = arg; // GET FILE VALUE var fname = $('#filename').val(); var fcnt = $('#filecount').val(); // GET FILE VALUE $('#img_'+id).remove(); $('#rmv_'+id).remove(); $('#img_'+id).css('display','none'); var dname = $('#name_'+id).val(); fcnt = parseInt(fcnt)-1; $('#filecount').val(fcnt); var fname = fname.replace(dname, ""); var fname = fname.replace(",,", ""); $('#filename').val(fname); $.ajax({ url: 'delete.php', type: 'POST', data:{'name':dname}, success:function(a){ console.log(a); } }); } 

Here is the part of PHP (delete.php):

 $path='local_cdn/'.$_POST['name']; if(@unlink($path)) { echo "Success"; } else { echo "Failed"; } 

Answer 3

You can use the jquery.form.js plugin to upload the image via ajax to the server.

http://malsup.com/jquery/form/

Here is an example loading jQuery ajax image script

 (function() { $('form').ajaxForm({ beforeSubmit: function() { //do validation here }, beforeSend:function(){ $('#loader').show(); $('#image_upload').hide(); }, success: function(msg) { ///on success do some here } }); })(); 

If in doubt, check out the ajax image upload tutorial here.

http://www.smarttutorials.net/ajax-image-upload-using-jquery-php-mysql/

Answer 4

Here is an easy way to use HTML5 and jQuery:

1) include two js files

 <script src="jslibs/jquery.js" type="text/javascript"></script> <script src="jslibs/ajaxupload-min.js" type="text/javascript"></script> 

2) enable CSS to have cool buttons

 <link rel="stylesheet" href="css/baseTheme/style.css" type="text/css" media="all" /> 

3) create a div or span

 <div class="demo" > </div> 

4) write this code on your HTML page

 $('.demo').ajaxupload({ url:'upload.php' }); 

5) create the upload.php file to upload the PHP code.

You can download the required JS file from here. Here is an Example.

Too cool and too fast and easy! :)