www.webdeveloper.com
Page 5 of 7 FirstFirst ... 34567 LastLast
Results 61 to 75 of 101

Thread: Resize, preview and upload an image with AJAX - Complete example

  1. #61
    Join Date
    Oct 2011
    Posts
    4

    Exclamation

    Quote Originally Posted by AMS View Post
    Hi rodneymonteiro,

    Thanks for using this plugin.

    You can configure the image sizes with the variable $uploadData, in /php/configuration.php.

    There you may add or remove resizing groups (large, medium, thumb, etc.). An upload directory will be created for every resizing group.
    Just to let you know that I am using the very first version, which you have written in this post.

    I have no idea, where this has to change in the configuration file. Are you able to please give me a small bit of code .. will very much appreciate it ...

  2. #62
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by rodneymonteiro View Post
    Just to let you know that I am using the very first version, which you have written in this post.
    The very first version of the plugin is deprecated. Please, download the one from the demo:

    http://dondedeportes.es/uploaderPreviewer

    You can reach it also from the official jQuery plugins site:

    http://plugins.jquery.com/project/UploaderPreviewer

    I tried to update my first post to place this links, but I didn't find out how... Sorry for that.
    Last edited by AMS; 10-06-2011 at 04:50 AM.

  3. #63
    Join Date
    Oct 2011
    Posts
    4
    Thanks AMS. Will have a look and let you know, how I go ...

    But thanks a lot for the replies and your work is superb.

  4. #64
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by rodneymonteiro View Post
    Thanks AMS. Will have a look and let you know, how I go ...

    But thanks a lot for the replies and your work is superb.
    Thanks for that

    Hope everything goes ok, but if you have any issues, please let me know.

  5. #65
    Join Date
    Oct 2011
    Posts
    4

    Angry Hi AMS

    Rodney again ..

    I worked on your script and everything is great.
    I managed to get the script according to my requirement, except for one place where I am stuck.

    After uploading, I DON'T WANT that message in the <div> to be displayed, rather than it uploads and goes to the page as listed in the configuration file.

    I am not able to remove that message. Can you please help me with this at the earliest?

    Appreciate it

    Regards
    Rodney

  6. #66
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by rodneymonteiro View Post
    Rodney again ..

    I worked on your script and everything is great.
    I managed to get the script according to my requirement, except for one place where I am stuck.

    After uploading, I DON'T WANT that message in the <div> to be displayed, rather than it uploads and goes to the page as listed in the configuration file.

    I am not able to remove that message. Can you please help me with this at the earliest?

    Appreciate it

    Regards
    Rodney
    Hi,

    You are right, sometimes the dialog box after saving has no sense. That's why I've developed a new version of the plugin including two new configuration variables:

    • savingDialogMessage
    • saveOkDialogMessage


    If you don't want the dialog box after saving, set saveOkDialogMessage to false.

    I have also extended the configuration section in the documentation, so it's easier to see what can be configurated.

  7. #67
    Join Date
    Nov 2011
    Posts
    2
    Hi AMS,

    Thanks for your work, it helped me a lot for one of my developpement project.

    Could you help me for something that no one has been talking about here?

    How could I update the pictures I've uploaded.

    I mean : I have a form with lots of infos (id, names...) and the uploader plugging, everything works fine, i save the form infos in a database and the pictures are uploaded perfectly.
    Now if I want to edit/update the whole thing, how could i preview the pictures i stored in the first place and overwrite them if necessary (I might overwrite, one or more, the first, the last, or actually any position)

    I hope i've been clear enough so you can understand me.

    Thanks in advance for your precious help

  8. #68
    Join Date
    Nov 2011
    Posts
    1
    I had the same problem,I considered your advice and I found it is wonderful.i had solve it after refer to your answer,thanks.

    __________________
    Cost performance Apple Accessories online.

  9. #69
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by atc4545 View Post
    I had the same problem,I considered your advice and I found it is wonderful.i had solve it after refer to your answer,thanks.
    You are welcome

  10. #70
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by fatche View Post
    Hi AMS,

    Thanks for your work, it helped me a lot for one of my developpement project.
    Glad to hear it

    Quote Originally Posted by fatche View Post
    Could you help me for something that no one has been talking about here?

    How could I update the pictures I've uploaded.

    I mean : I have a form with lots of infos (id, names...) and the uploader plugging, everything works fine, i save the form infos in a database and the pictures are uploaded perfectly.
    Now if I want to edit/update the whole thing, how could i preview the pictures i stored in the first place and overwrite them if necessary (I might overwrite, one or more, the first, the last, or actually any position)

    I hope i've been clear enough so you can understand me.

    Thanks in advance for your precious help
    Check the Initialize forms to update files section in the documentation (http://dondedeportes.es/uploader-previewer). There you can see:

    Code:
    <div class="imageForms" images="image1.png,image2.jpg,image3.gif"></div>
    You have to place the existing image names in the imageForms div, within the images attribute.

    You have to read this attribute in javascript and populate the image forms, in the $(document).ready(), for instance. The attribute may be removed in order to clean the code:

    Code:
    if ($('div.imageForms[images]').length) {
      
      var imageFilenames = $('div.imageForms[images]').attr('images').split(',');
    
      $.uploaderPreviewer.populateImages(imageFilenames);
    
      $('div.imageForms[images]').removeAttr('images');
    }
    The image names in the comma-separated string are splitted into an array, which is used by populateImages().

    So far, if the plugin configuration is right, the images should be displayed on page load. And also if the configuration is right, you will be able to remove or replace anyone of them.

    The working flow in the form is the same for insert and for update. The difference comes when the form is submitted. For an update, you will have to loop over every image and call the complex function updateUpload() of uploadedFile.php.

    updateUpload() gets the name of the image comming from the form, the name of the stored image and a keyword list. If both names are equal, this means that the image remains as it was. Nothing is performed. The stored image name (which is equal to the image name from the form) is returned.

    If the names are different, this means that the image was changed. Then, the old image is deleted and the new one moved from the temp directory, were it was, to the uploads directory. A new filename is generated with the keyword list. The new filename is then returned.

    That's the easy way, where you only have to do a loop and call updateUpload(). In the post below, I explain how to avoid the loop and the function call in every iteration. It is though not so easy going

  11. #71
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Here I place a function to update uploaded images with no loop.

    It takes two arrays, one with the images comming from the form (which may contain some changes or not) and one with the images stored in database.

    This two arrays are substracted in both ways, in order to get the new and the deleted images, which are set in the arrays $deletedUploads and $newUploads.

    A last array, $totalUploads, gets the list of total stored images. You may return this array instead of $result, or pass it by reference as parameter. It is not used in this function for any purpose, if you don't need this array for anything, you may remove it from the function.

    Code:
        private function updateUploads($uploads, $dbUploads) {
    
            $result = true;
    
            $totalUploads = array();
    
            if ($dbUploads) {
                $totalUploads = $dbUploads;
            }
    
            if ($uploads && $dbUploads) {
                $deletedUploads = array_diff($dbUploads, $uploads);
                $newUploads = array_diff($uploads, $dbUploads);
            }
            else {
                $deletedUploads = $dbUploads;
                $newUploads = $uploads;
            }
    
            if ($deletedUploads) {
                
                $totalUploads = array_diff($totalUploads, $deletedUploads);
    
                $result = $result && UploadedFile::deleteUploadedFiles($deletedUploads);
    
                $sql = 'DELETE FROM table'
                     . ' WHERE field IN ("' . implode('","', $deletedUploads) . '")';
    
                $result = mysql_query($sql) && $result;
            }
    
            if ($newUploads) {
                
                $newUploads = UploadedFile::moveTempFilesDescriptiveNames(
                        $newUploads, $this->getDescriptiveNameKeywords()
                );
    
                $totalUploads = array_merge($totalUploads, $newUploads);
    
                // Example: INSERT INTO tbl_name (a,b,c) VALUES(1,2,3),(4,5,6),(7,8,9);
                
                $preparedValues = implode('"),(' . $elementId . ',"', $newUploads);
    
                $sql = 'INSERT INTO table (element_id, field)'
                     . ' VALUES(' . $elementId . ', "' . $preparedValues . '")';
    
                $result = mysql_query($sql) && $result;
            }
    
            return $result;
        }

  12. #72
    Join Date
    Nov 2011
    Posts
    2
    Thanks a lot AMS,

    I'm gonna try all this as soon as possible and i'll let you know about the result

    Have a good day

  13. #73
    Join Date
    Feb 2012
    Posts
    2

    Broken Image Icon

    Hello AMS,

    Thanks so much for making your code available!

    I am working on my localhost as I work on integrating your script into my website. I have 'urlRoot' => 'localhost/' set in the $pathnames array.

    So far, all I have done is copy the script into my localhost root directory. The images are uploading into the proper directories, but when it goes to show the preview image in the form and the uploaded image in saved.php, it shows a broken image icon.

    Any ideas on what section of the code I should focus on and why this might be happening?

    Thanks much,
    Paul

  14. #74
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by pds View Post
    Hello AMS,

    Thanks so much for making your code available!

    I am working on my localhost as I work on integrating your script into my website. I have 'urlRoot' => 'localhost/' set in the $pathnames array.

    So far, all I have done is copy the script into my localhost root directory. The images are uploading into the proper directories, but when it goes to show the preview image in the form and the uploaded image in saved.php, it shows a broken image icon.

    Any ideas on what section of the code I should focus on and why this might be happening?

    Thanks much,
    Paul
    Hi Paul,

    Maybe you should place a '/' before your path. Try 'urlRoot' => '/localhost/'.

    You can also try with complete url 'urlRoot' => 'http://localhost/'.

  15. #75
    Join Date
    Feb 2012
    Posts
    2
    'urlRoot' => '' did the trick. (I'm using XAMPP and my files go in the htdocs folder. so it was ending up looking in localhost/localhost/ directory).

    Thanks for your help!

    I have another issue I'm trying to get to the bottom of. I am using Tabs from http://flowplayer.org (jquery.tools.js) and it looks like the ui javascript (jquery-ui-1.8rc2.custom.min.js) is breaking my Tabs.

    I use jQuery's noConflict function which keeps the Tabs & your uploading script from conflicting as long as I don't load the ui javascript. However, I lose the dialog box and progress bar without the ui javascript.

    Any ideas on how to work around this? Maybe a more recent version of the ui js? If I only need 1 or 2 modules from the ui javascript and they aren't the issue, maybe I could just load those modules instead of the entire jquery-ui-1.8rc2.custom.min.js. What do you think?

    The noConflict code is as follows:

    Code:
    <script type="text/javascript">
    			var $g = jQuery.noConflict();
    			(function($g) {
    			
    			$g(document).ready(function() {
    			
    				// it must be checked if there are div.imageForms because the
    				// uploaderPreviewer javascript may be not included and produce an error
    				if ($g('div.imageForms').length) {
    			
    					$g('div.imageForms').append($g.uploaderPreviewer.createImageForms());
    			
    					// the images are populated if the admin form is to edit, and not
    					// to insert
    					if ($g('div.imageForms[images]').length) {
    						var imageFilenames = $g('div.imageForms[images]').attr('images').split(',');
    						$g.uploaderPreviewer.populateImages(imageFilenames);
    						$g('div.imageForms[images]').removeAttr('images');
    					}
    				}
    			
    				$g('#buttonSave').click(function() {
    					var itemId = $g(this).attr('itemId');
    					if (itemId) {
    						$g.itemForm.update(itemId);
    					}
    					else {
    						$g.itemForm.insert();
    					}
    				});
    			
    			});
    			
    			})(jQuery);
    			
    			</script>

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles