AT Web Results, Inc

Software Support Forum

Return to AT Web Results Website
It is currently Fri Sep 03, 2010 3:44 pm

All times are UTC - 6 hours




Post new topic Reply to topic  [ 103 posts ]  Go to page 1, 2, 3, 4, 5 ... 7  Next
Author Message
 Post subject: AJAX Image Uploads, how did you do that???
PostPosted: Sun Feb 01, 2009 3:49 am 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
So you want to upload images using AJAX, well why wouldn't you want to. AJAX makes the end users experience so much nicer! No page reloads, you can handle errors and success messages very gracefully. And you can even animate the whole process to add some transitions and effects to make the otherwise very boring GUI a little more, what should i say appealing?

Well unfortunately for security reasons you can't use ajax to upload files from your PC, but think about it, would you want to... as a user would you want information silently uploaded in the background, nope.

But never fear, there are alternatives.... their is flash (a bit bulky for my taste) and i have seen a few other out their as well... but after hours of searching I decided to take a product that was almost perfect and finish the job. Take a look below how standard Javascript can look and feel a lot like Ajax, heck if you don't look at the source code and you didn't know any better you would probably swear it was!

http://atwebresults.com/php_ajax_image_upload/

UPDATE this has been made to work with Safari and chrome as well, take a look at our PHP restaurant menu script demo to see it in action:

http://restaurantmenuscript.com/php_res ... emo/admin/

username admin
password admin

As Promised attached is the source code, enjoy!


Attachments:
File comment: UPDATED FILE ON 2-24-2008
php_ajax_image_upload.zip [73.8 KiB]
Downloaded 15635 times
php_ajax_image_upload.zip [73.14 KiB]
Downloaded 4142 times

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com
Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Fri Feb 13, 2009 4:42 am 
Offline

Joined: Fri Feb 13, 2009 4:37 am
Posts: 2
Hi mate. Nice work. I like it.
I saw some errors using with IE 8. In the second form after uploading photo, when I click anywhere on page uploading starting again. Its twice uploading.
And I think after uploading the form should be hidden. Its imposible?


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Fri Feb 13, 2009 2:28 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
IE 8 is still in beta, I wouldn't modify this script or any for that matter until it is released.

As for hidding the uploader, that would be very doable. Please look at the JS file for info, just hide the form onsubmit.

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Fri Feb 13, 2009 5:40 pm 
Offline

Joined: Fri Feb 13, 2009 5:29 pm
Posts: 1
This is the best Ajax upload solution i found. Thanks for your great work...

I am trying to embed the uploading interface into a form.

<form>
</form> // ... ajax uploader form

<form> //... another form
<input name= // form inputs
// Results from ajax
<div id="right_col">
<div id="upload_area">
</div>
//
<input name= // ..... more form inputs
</form>

This way i manage to display the picture inside the form... However, what i really need is to process the filename of the image into SQL with other inputs of the form...

I tried ; adding the bwlow code into ajaxupload.js, so that when it displays the image it also creates a new input value...

echo '<input name="artimage" type="hidden" id="artimage" value="'.$upload_image.'" />';

However that doesnt seem to work...

Is there anyway to use the image as an input for another form on the same page ?

Thanks,
Ersan


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Fri Feb 13, 2009 5:51 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
Thank you for your interest in our AJAX Image Upload Script. A couple quick notes...

We developed this area of the forum for the community to post tips and tricks and add-ons or uses for this script. We really want this to be a community supported product.

With that being said as the core developer we are extremely busy, and we will answer questions when we can, but please do not expect immediate responses.

If you are really stuck and cannot figure out how to integrate this into you project the best way to get a response/help from us is to use the donate link on the example page. With your donation please post your question in the "notes area" in the PayPal donations area. Also please note that the solution we provide for you will also be posted here.

Thanks for your understanding.

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Sun Feb 15, 2009 11:13 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
ersan wrote:
This is the best Ajax upload solution i found. Thanks for your great work...

I am trying to embed the uploading interface into a form.

<form>
</form> // ... ajax uploader form

<form> //... another form
<input name= // form inputs
// Results from ajax
<div id="right_col">
<div id="upload_area">
</div>
//
<input name= // ..... more form inputs
</form>

This way i manage to display the picture inside the form... However, what i really need is to process the filename of the image into SQL with other inputs of the form...

I tried ; adding the bwlow code into ajaxupload.js, so that when it displays the image it also creates a new input value...

echo '<input name="artimage" type="hidden" id="artimage" value="'.$upload_image.'" />';

However that doesnt seem to work...

Is there anyway to use the image as an input for another form on the same page ?

Thanks,
Ersan


Hey Ersan,

Your on the right track! Look inside the JS file and you will see the area whe the info is sent back from the PHP script, in there you will need to update what happens with the image, IE display it and update your hidden input field.

There would be no need for 2 form tags just put this inside the primary form tag and to make sure that is unobtrusive, have your form processing script check the hidden input for a valid image data, if it doesnt exisit have your form upload the image.

Thanks again for your interest in our work!

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 17, 2009 5:05 am 
Offline

Joined: Fri Feb 13, 2009 4:37 am
Posts: 2
Tim - AT Web Results wrote:
IE 8 is still in beta, I wouldn't modify this script or any for that matter until it is released.

As for hidding the uploader, that would be very doable. Please look at the JS file for info, just hide the form onsubmit.

Hide form onsubmit is bad thing. Form should be hidden if here no any errors on upload. So i think this is imposible to do. Need redesign all JS script if you want hide form after uploading. If you have developed update for this just put in code here.


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 17, 2009 9:29 am 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
Hey tobkinas,

Nah this is easy. no need to rewrite the code!

FIND
Code:
if(html_show_loading.length > 0){
   $m(id_element).innerHTML = html_show_loading;
}


REPLACE
Code:
if(html_show_loading.length > 0){
   $m(id_element).innerHTML = html_show_loading;
}else{
   document.getElementById('YOUR_FORM_ID').style.display = 'none';
}


Hope this helps.

HINT: You may want to program in some more error checking before hiding the form in the ELSE clause, otherwise your users may be stuck with an error in the upload and no way to try again.

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 4:15 pm 
Offline

Joined: Tue Feb 24, 2009 4:06 pm
Posts: 38
I'm trying to set the maxSize value so people are limited let's say to 2mb.

Changed the maxSize=9999999999 to value of 9 to see it I could generate an error at least, but I couldn't.

AT Support (Name Unknown) has been very generous to lend me a hand. He had basically exchanged maybe 20 emails with me in the last 12 hours. This is by far the most usable and simple to implement image upload script I've found.

Codex73


Top
 Profile  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 4:32 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
codex73x wrote:
I'm trying to set the maxSize value so people are limited let's say to 2mb.

Changed the maxSize=9999999999 to value of 9 to see it I could generate an error at least, but I couldn't.

AT Support (Name Unknown) has been very generous to lend me a hand. He had basically exchanged maybe 20 emails with me in the last 12 hours. This is by far the most usable and simple to implement image upload script I've found.

Codex73


Sorry I threw together the PHP File upload function pretty quickly!

I fixed and tested and should work fine now.

Also, I did isolate a couple other minor bugs which i am tweeking now and will be recomplied into the a new version of the download package. Should be available by later tonight and I will post here when its updated.

In the mean time here is the new upload image function which can be found in the scripts/ajaxupload.php file

Code:
   function uploadImage($fileName, $maxSize, $maxW, $fullPath, $relPath, $colorR, $colorG, $colorB, $maxH = null){
      $folder = $relPath;
      $maxlimit = $maxSize;
      $allowed_ext = "jpg,jpeg,gif,png,bmp";
      $match = "";
      $filesize = $_FILES[$fileName]['size'];
      if($filesize > 0){   
         $filename = strtolower($_FILES[$fileName]['name']);
         $filename = preg_replace('/\s/', '_', $filename);
            if($filesize < 1){
            $errorList[] = "File size is empty.";
         }
         if($filesize > $maxlimit){
            $errorList[] = "File size is too big.";
         }
         if(count($errorList)<1){
            $file_ext = preg_split("/\./",$filename);
            $allowed_ext = preg_split("/\,/",$allowed_ext);
            foreach($allowed_ext as $ext){
               if($ext==end($file_ext)){
                  $match = "1"; // File is allowed
                  $NUM = time();
                  $front_name = substr($file_ext[0], 0, 15);
                  $newfilename = $front_name."_".$NUM.".".end($file_ext);
                  $filetype = end($file_ext);
                  $save = $folder.$newfilename;
                  if(!file_exists($save)){
                     list($width_orig, $height_orig) = getimagesize($_FILES[$fileName]['tmp_name']);
                     if($maxH == null){
                        if($width_orig < $maxW){
                           $fwidth = $width_orig;
                        }else{
                           $fwidth = $maxW;
                        }
                        $ratio_orig = $width_orig/$height_orig;
                        $fheight = $fwidth/$ratio_orig;
                        
                        $blank_height = $fheight;
                        $top_offset = 0;
                           
                     }else{
                        if($width_orig <= $maxW && $height_orig <= $maxH){
                           $fheight = $height_orig;
                           $fwidth = $width_orig;
                        }else{
                           if($width_orig > $maxW){
                              $ratio = ($width_orig / $maxW);
                              $fwidth = $maxW;
                              $fheight = ($height_orig / $ratio);
                              if($fheight > $maxH){
                                 $ratio = ($fheight / $maxH);
                                 $fheight = $maxH;
                                 $fwidth = ($fwidth / $ratio);
                              }
                           }
                           if($height_orig > $maxH){
                              $ratio = ($height_orig / $maxH);
                              $fheight = $maxH;
                              $fwidth = ($width_orig / $ratio);
                              if($fwidth > $maxW){
                                 $ratio = ($fwidth / $maxW);
                                 $fwidth = $maxW;
                                 $fheight = ($fheight / $ratio);
                              }
                           }
                        }
                        if($fheight == 0 || $fwidth == 0 || $height_orig == 0 || $width_orig == 0){
                           die("FATAL ERROR REPORT ERROR CODE [add-pic-line-67-orig] to <a href='http://www.atwebresults.com'>AT WEB RESULTS</a>");
                        }
                        if($fheight < 45){
                           $blank_height = 45;
                           $top_offset = round(($blank_height - $fheight)/2);
                        }else{
                           $blank_height = $fheight;
                        }
                     }
                     $image_p = imagecreatetruecolor($fwidth, $blank_height);
                     $white = imagecolorallocate($image_p, $colorR, $colorG, $colorB);
                     imagefill($image_p, 0, 0, $white);
                     switch($filetype){
                        case "gif":
                           $image = @imagecreatefromgif($_FILES[$fileName]['tmp_name']);
                        break;
                        case "jpg":
                           $image = @imagecreatefromjpeg($_FILES[$fileName]['tmp_name']);
                        break;
                        case "jpeg":
                           $image = @imagecreatefromjpeg($_FILES[$fileName]['tmp_name']);
                        break;
                        case "png":
                           $image = @imagecreatefrompng($_FILES[$fileName]['tmp_name']);
                        break;
                     }
                     @imagecopyresampled($image_p, $image, 0, $top_offset, 0, 0, $fwidth, $fheight, $width_orig, $height_orig);
                     switch($filetype){
                        case "gif":
                           if(!@imagegif($image_p, $save)){
                              $errorList[]= "PERMISSION DENIED [GIF]";
                           }
                        break;
                        case "jpg":
                           if(!@imagejpeg($image_p, $save, 100)){
                              $errorList[]= "PERMISSION DENIED [JPG]";
                           }
                        break;
                        case "jpeg":
                           if(!@imagejpeg($image_p, $save, 100)){
                              $errorList[]= "PERMISSION DENIED [JPEG]";
                           }
                        break;
                        case "png":
                           if(!@imagepng($image_p, $save, 0)){
                              $errorList[]= "PERMISSION DENIED [PNG]";
                           }
                        break;
                     }
                     @imagedestroy($filename);
                  }else{
                     $errorList[]= "CANNOT MAKE IMAGE IT ALREADY EXISTS";
                  }   
               }
            }      
         }
      }else{
         $errorList[]= "NO FILE SELECTED";
      }
      if(!$match){
            $errorList[]= "File type isn't allowed: $filename";
      }
      if(sizeof($errorList) == 0){
         return $fullPath.$newfilename;
      }else{
         $eMessage = array();
         for ($x=0; $x<sizeof($errorList); $x++){
            $eMessage[] = $errorList[$x];
         }
            return $eMessage;
      }
   }

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 4:39 pm 
Offline

Joined: Tue Feb 24, 2009 4:06 pm
Posts: 38
This is more than fantastic....TY


Top
 Profile  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 4:50 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
No prob :D

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 5:24 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
Thought i'd post this tid bit.

to use the script you need to update the following information:

VERY IMPORTANT! Update the form elements below ajaxUpload fields:
1. form - the form to submit or the ID of a form (ex. this.form or standard_use)
2. url_action - url to submit the form. like 'action' parameter of forms.
3. id_element - element that will receive return of upload.
4. html_show_loading - Text (or image) that will be show while loading
5. html_error_http - Text (or image) that will be show if HTTP error.

VARIABLE PASSED BY THE FORM:
maximum allowed file size in bytes:
maxSize = 9999999999

maximum image width in pixels:
maxW = 200

maximum image height in pixels:
maxH = 300

the full path to the image upload folder:
fullPath = http://www.atwebresults.com/php_ajax_im ... d/uploads/

the relative path from scripts/ajaxupload.php -> uploads/ folder
relPath = ../uploads/

The next 3 are for cunstom matte color of transparent images (gif,png), use RGB value
colorR = 255
colorG = 255
colorB = 255

The form name of the file upload script
filename = filename

Also the download package has been updated!

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 6:26 pm 
Offline

Joined: Tue Feb 24, 2009 4:06 pm
Posts: 38
Great. No I go on to writing the file name assign to the mysql db. I'm associating user with a profile picture. Your script is great as it uploads and re size on one shot, plus not reloading on submit, so for some, yes, it's aJax magic like, which is exactly what I was looking. I'm sure other will find the script to be well designed and self explanatory.


Top
 Profile  
 
 Post subject: Re: AJAX Image Uploads, how did you do that???
PostPosted: Tue Feb 24, 2009 6:32 pm 
Offline
Site Admin
User avatar

Joined: Fri Sep 15, 2006 4:23 pm
Posts: 264
Location: Rockford, IL
Thanks Man!

I sell a few scripts online and also do custom development, but wanted to "give" something back to the community, I really hope this script helps people and i am really looking forward to the web development community contributing to make it even better!

_________________
Tim Wickstrom
President / Founder
AT Web Results, Inc.
http://www.atwebresults.com

NOTE: If you find my help useful donations are always appreciated. PayPal address is:
tim@atwebresults.com


Top
 Profile E-mail  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 103 posts ]  Go to page 1, 2, 3, 4, 5 ... 7  Next

All times are UTC - 6 hours



Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group