Page 2 of 7 FirstFirst 1234 ... LastLast
Results 16 to 30 of 101

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

  1. #16
    Join Date
    Oct 2009
    You are using Prototype? Too bad you didn't choose JQUERY. Wordpress uses jquery so many of the functions I use are hopefully built into that. That way I don't have to further bloat my web site with more stuff.

    Today I hope to have a chance to check the stuff out that you sent me. I forgot to mention a couple things...

    As far as changing the SPACES in filenames... I just made sure to put double quotes around my src in <img src="picture with spaces.jpg"> and that "fixed" it. That was sort of a DUH! moment. However, my OS is linux, so I generally don't like spaces! I also think I know where I need to do the rename change - it's in the uploadImage.php, right? I was playing with that the other day. I also added code to create a directory - mkdir() - based on the users ID. So every user has their own "library" ... it's pretty cool!

  2. #17
    Join Date
    Oct 2009
    You know what? I was just thinking. I use your script up to the point of hitting SUBMIT.

    However, I never really SUBMIT to your script. All I do is capture the path to the uploaded Thumbnail/Preview. That is the image that becomes part of the post. The path is captured and written into a textarea. And then THAT is what is submitted as the post.

    So I need the File upload to upload the original into a specific place, and then create the thumb/resized image from that to a different place, whose path I use for the posting.

    make sense?

    So, knowing that, will I still be able to use your suggestions?

    (and I haven't even had a chance to look at those, yet, either! Sorry! I will try right now!)


  3. #18
    Join Date
    Oct 2009
    OH yeah - and SINCE I never do a SUBMIT, it never cleans up the stuff in $oldImageToDelete

    Maybe I should call it everytime an image is previewed... I'll try that.

  4. #19
    Join Date
    May 2010

    Multiple images upload

    Hi there,

    I love the script - I think it works great - I have a question though:

    Have you tried playing around with having multiple image upload fields?

    Ultimately I want to have a form that will collect text data (name, phone, etc.) and include this image uploader at the bottom, and allow for multiple image uploads. I would like to simplify things by having the user fill in all the text, choose their images, hit "Upload" ONCE, and have all the information (text and images) saved and stored.

    What would I need to do to the code of this file to allow for more than one image at a time?


  5. #20
    Join Date
    May 2009
    Madrid, Spain

    Thanks for the comments

    Yes, I use the script with multiple images, and it works quite good for me. The only thing you have to do is to set unique ids for the file fields. You can achieve this by only setting an index (fileField1, fileField2, etc.).

    I have updated the php script and developed a jQuery plugin that makes the task simplier. I was planning to release it in a couple of months, as it takes some time to revise the code, write use instructions and develop a demo, and I don't have time for it right now. However, if you want, I can upload it here, with a few quick instructions.

  6. #21
    Join Date
    May 2010

    That would be great!

    Hi AMS,

    That would be awesome! I have spent literally days upon days trying to find something like this and modifying what I could find to do what I want it to do (I am not a developer - more of a designer

  7. #22
    Join Date
    May 2009
    Madrid, Spain
    I see. If you are not a developer, it becomes more difficult.

    Ok, I will upload here the jQuery plugin and the php script. Just give me a couple of days.

  8. #23
    Join Date
    May 2009
    Madrid, Spain

    UploaderPreviewer jQuery Plugin

    Here is the UploaderPreviewer jQuery Plugin.

    I have tried to do it as complet as possible, but, as I already said, I have not much time right now. I hope to revise it and put a demo somewhere, so it can be seen in action

    Though, I have made a simple demo with a little description, so who ever can install and try it out. If you have any question about the plugin, please ask

    You can find everything attached to this post in two zip files (the maximum file size is 100 KB). Please, uncompress them and join both folders.

    I have posted some features of the plugin below.

    Hope it may be useful!


    • Crossbrower. Firefox, Opera, Chrome, Safari and IE.
    • No garbage. The files in the temporary directory are deleted when the user exits or reloads the page
    • Descriptive filenames. The file names are constructed with a three random keywords of a given keywords list. If the filename already exists, characters are taken from the unique temporary filename generated by PHP.
    • Iframe factory. An iframe factory is used in order not to unnecessary duplicate iframes.
    • Loading spinner image. A loading spinner image is displayed while the uploading. It was taken from the website ajaxload.info.
    • Loading timeout. A jQuery dialog box is displayed while the saving. It contains a progress bar that shows the elapsed time if there are images loading. If the maximum loading time is reach, the saving process is canceled and an error message is displayed. To test this feature, it can be placed a timer in the php script. For example, place sleep(5); before the return statement, at the end of the script.
    • Javascript validations.
      • Image type. uploaderPreviewer.js > checkImageType()
      • Uploaded files. itemForm.js > validateData()
    • Php validations. All in uploadImage.php.
      • Upload error.
      • File type. File types supported by the script: png, jpg, gif.
      • File size. The maximum supported is 3000000.
      • File dimension. The maximum supported is 2500.

  9. #24
    Join Date
    May 2010

    Adding text field inputs

    Hi AMS,

    Thanks for that - I have been playing around with the uploader and it seems to work great!

    I want to use the uploader at the bottom of a standard form, where above it would have text input fields. Ultimately, the final result would be a page with a few text inputs, the image inputs, and one "Upload" or "Save" button that would POST everything to a mySQL database.

    I would be able to do this myself if the form was written in html or even php, but with it done in javascript I don't know where to look. I have been trying to figure out how to add single form input fields, and so far have not been successful.

    I know you are really busy, but is there a place I should be adding/modifying code (in one of the files) that would allow me to add additional form fields and specify a database to POST to?

    Thanks again!

  10. #25
    Join Date
    May 2010
    If you need client side handling of files before uploading and or batch uploading why not use a signed java applet or flash like they do on sites like facebook?

  11. #26
    Join Date
    May 2009
    Madrid, Spain
    Quote Originally Posted by mikey_ray View Post
    I know you are really busy, but is there a place I should be adding/modifying code (in one of the files) that would allow me to add additional form fields and specify a database to POST to?
    Hi there,

    There are two ways to send POST parameters with javascript:

    • Ajax with POST method.
    • Submit a existing POST form with submit() function.

    Javascript cannot construct and send individual POST parameters, due to security reasons.

    You may add the text inputs in the main php file, index.php. Then you have to manage them together with the uploaderPreviewer file fields. This kind of functions are placed in the plugin in the itemForm.js file, concretely in the submitForm() function. This function is called after the validateData() function, so you can check there if the form data is correct before sending them.

    In the submitForm() function the ajax option to send POST parameters is used. Then it is received a reply, and if everything went ok, the user is redirected to a success page. If there was something wrong, a dialog box with a message is displayed. This would be managed in the saved() function.

    If you prefer to use the second way to send POST parameters, by submitting a POST form, you can see it in the $.uploaderPreviewer.uploadImage() function. It is used to automatically upload the images, as it is the only possible way to send a file with javascript.

    Hope this answers your question

  12. #27
    Join Date
    May 2009
    Madrid, Spain
    Quote Originally Posted by amsterdamharu View Post
    If you need client side handling of files before uploading and or batch uploading why not use a signed java applet or flash like they do on sites like facebook?
    Well, the main idea behind is to keep it as simple as possible, using basic technologies that the browsers can understand and interpret the fastest, and that you are absolutely sure that will work in every browser.

    If you use other technologies than the basic ones (i.e. html, javascript), your site may not be seen by some people that don't have their broswers adapted. So you are forcing them to install some components in their computers in order to be able to see you website. Even propietary components like Flash! (Moreover, Flash not always works fine in Linux.)

    I know javascript is not a great programming language, but it is supported by every browser. And there are great open source frameworks like jQuery, Prototype, Mootools, etc. with a great community supporting them. Do you think all these people contributing to these frameworks, some of them web technologies experts, would be spending their time if it were no worth?

  13. #28
    Join Date
    Jan 2009
    Javascript cannot construct and send individual POST parameters, due to security reasons.
    This is not the case. How else would an AJAX request be built?

  14. #29
    Join Date
    May 2009
    Madrid, Spain
    Quote Originally Posted by criterion9 View Post
    This is not the case. How else would an AJAX request be built?
    I am not sure if I have understood the question. An ajax request can send GET or POST parameters, the same as a html form.

    Does this answer your question?

  15. #30
    Join Date
    May 2010
    I don't realy understand what the script does, ... sorry.

    What I think it does is sent the images to the server and process resize there then load it into the client. If images are huge that might take longer than needed and client side handling should apply (yes applet, flash or activex preferably all). Big sites like facebook support it one way or another on linux. (it did before China started blocking facebook).

    As long as you have clients that are aware of the big file long time upload fact than I think this is more better than using client side. But I am not a programmer I am just an English teacher.
    Last edited by amsterdamharu; 05-24-2010 at 12:09 PM.

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13023 seconds
  • Memory Usage 3,031KB
  • Queries Executed 15 (?)
More Information
Template Usage (36):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (75):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates