dcsimg
www.webdeveloper.com
Page 4 of 7 FirstFirst ... 23456 ... LastLast
Results 46 to 60 of 101

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

  1. #46
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    Think I manage to get it alr. Thanks for all the help

    Regards,
    Fire

  2. #47
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by SpitFire11 View Post
    I did search for the syntax to pass the the $savedImages array to a function as per mentioned but I just couldn't find it. Could you help to show me a simple syntax to pass the array to a function.
    I think I haven't understood the question.

    Do you ask for the structure of the array? Or are you asking how can you call a function that inserts the uploaded images in a database?

  3. #48
    Join Date
    Apr 2011
    Posts
    13

    Thumbs up

    Hi AMS,

    Initially I was puzzling about how to call each and every item that the array $savedImages stored and then I found out that it work just like the default array structure using the normal $savedImages[0] for the first element and so does for the rest of the element.

    I manage to get the function work and stored it in the database after understand this point.

    Thanks a lot AMS and really appreciate all your help and the plugin that work wonder.

    Thanks
    Fire

  4. #49
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by SpitFire11 View Post
    Hi AMS,

    Initially I was puzzling about how to call each and every item that the array $savedImages stored and then I found out that it work just like the default array structure using the normal $savedImages[0] for the first element and so does for the rest of the element.

    I manage to get the function work and stored it in the database after understand this point.

    Thanks a lot AMS and really appreciate all your help and the plugin that work wonder.

    Thanks
    Fire
    Great, I hope you have everything running now

  5. #50
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    Thanks for all the great help. I have another problem that faced while integrating the script into the form. Currently I am using 2 forms in the page. The 1st form is used to input all the information of the user and the 2nd form is used for the picture upload (your script).

    For the second part, how can I use just one button to submit the input text value and also trigger save/rename image files name together? In short, i just want to have one submit button in the 2 forms.

    Thanks
    Fire

  6. #51
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by SpitFire11 View Post
    Currently I am using 2 forms in the page. The 1st form is used to input all the information of the user and the 2nd form is used for the picture upload (your script).

    For the second part, how can I use just one button to submit the input text value and also trigger save/rename image files name together? In short, i just want to have one submit button in the 2 forms.
    Hi Fire,

    The functions for the form are in itemForm.js. I'll explain the code flow to submit a form:

    1 - When the button "save" is clicked, the function itemForm.js > save() is triggered.

    2 - The function itemForm.js > save() calls itemForm.js > validateData(). Here you may validate the data of your form.

    3 - If the data is validated, a loading message is shown, while checking if there are images loading in jQuery.itemForm.submitFormIfNotImageLoading().
    It will be checked if there are images loading till the time limit set in $.itemForm.loadingTimeout.
    The checking interval in set in $.itemForm.checkingIntervalTime.
    When there are no images loading, the loading message is hidden and the form submitted.
    If the time limit is reached and there are yet images loading, the loading message is hidden, a timeout message is shown and the submit process is stopped.

    4 - If no timeout is produced, the function jQuery.itemForm.submitFormIfNotImageLoading() calls itemForm.js > submitForm(), where all the data are gathered and submitted via post ajax.
    Here you can retrieve all the data you need. You have to store it in the variable parameters.

    5 - The ajax call will be addressed to the url set in $.itemForm.insertOrUpdateAjaxUrl.
    This variable is set in jQuery.itemForm.insert and jQuery.itemForm.update, and allows to easily change the url, so that the same form may be used for inserting or updating.

    6 - The ajax result is managed in the itemForm.js > saved() function.
    If the result is ok, it will contain the url of the page, the user must be redirected to, when he clicks on the ok message, which is displayed to the user. The ajax result might also contain a warning message, which would be also displayed to the user.
    If the ajax was not ok, the result will contain an error message, which is shown to the user. No redirection is performed.

  7. #52
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    Thanks for the helpful information. I will try to figure out how to configure it based on your input.

    Thanks
    Fire

  8. #53
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    I still failed to figure it out after several attempt. Probably I not explain in detail about the another form I am using.

    For your information I am using the inline form validation from "Position Absolute" which located at http://www.position-relative.net/cre...alidators.html

    How can my form's "Validate & Send the form!" button trigger the save() function in your class?

    Thanks
    Fire

  9. #54
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by SpitFire11 View Post
    Hi AMS,

    I still failed to figure it out after several attempt. Probably I not explain in detail about the another form I am using.

    For your information I am using the inline form validation from "Position Absolute" which located at http://www.position-relative.net/cre...alidators.html

    How can my form's "Validate & Send the form!" button trigger the save() function in your class?

    Thanks
    Fire
    Hi SpitFire,

    In order to trigger the save() function, you must bind the function (or any function that calls it) to the click event of the button. It is done within the $(document).ready() function.

    In the demo it's located in the index.php file. The save() function is called by the $.itemForm.insert() or the $.itemForm.update() functions, which are bound to the save button.

  10. #55
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    Sorry for my late reply. The notification reply email just went into my spam mailbox.

    I will try that out. Thanks

    Millions thanks for your reply and help.

    Thanks,
    Fire

  11. #56
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    I am stuck again. I have think of a way to integrate your form into the the form validation form whereby a user is required to upload a minimum 1 image to the uploader and will be verified by the form validator.

    Question: How could I trigger the function in your form to update div#1 (just an unique identifier div in the form validator to get the triggering input from your form whenever image 1 is uploaded), when an image is successfully uploaded by your image uploader?

    I have attached a sketch piece of image for your better understanding as below.

    And thanks again AMS for all the help so far. Appreciated.

    Thanks
    Fire
    Attached Images Attached Images

  12. #57
    Join Date
    Apr 2011
    Posts
    13
    Hi AMS,

    I miss out a point here on the previous post #56 in the question.

    When a user upload an image, I would like the unique temp filesname generated from your image upload script to be transfered from the image upload form to the hidden input text field at the e.g. div#1 in the validator form".

    Thanks
    Regards,
    Fire

  13. #58
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Hi,

    I have uploaded a online demo of the plugin here

    http://dondedeportes.es/uploaderPreviewer

    Hope it is useful for anyone.

    If you have any comments, please post them on this forum.

  14. #59
    Join Date
    Oct 2011
    Posts
    4

    Unhappy Hi AMS

    I have been trying to work on you script and works perfect and this is what I have been looking for.

    Just one issue, I need the images a bit smaller as I need to display them as the profile image of a person on the left hand side, just like facebook.

    Dont know what needs to be changed to get a perfect image without distortion.

    Kindly help me in this regard.

    Will appreciate it.

  15. #60
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by rodneymonteiro View Post
    I have been trying to work on you script and works perfect and this is what I have been looking for.

    Just one issue, I need the images a bit smaller as I need to display them as the profile image of a person on the left hand side, just like facebook.

    Dont know what needs to be changed to get a perfect image without distortion.

    Kindly help me in this regard.

    Will appreciate it.
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 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