www.webdeveloper.com
Page 6 of 7 FirstFirst ... 4567 LastLast
Results 76 to 90 of 101

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

  1. #76
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by pds View Post
    '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 'localhost/' path is relative and was being appending to the root one, 'http://localhost'. That's why I suggested a path from the root (with a preceding slash), '/localhost/', or a complete path, 'http://localhost/'. But if it works for you with an empty path, keep it so.

    Sorry, I don't know where might be the conflict between jQuery UI and the plugin you are using. You'll need to isolate the conflict code and analyse where the problem is. You have to dive into the code and do the trick by commenting single code lines that you think might be causing the conflict. Good luck!

  2. #77
    Join Date
    Feb 2012
    Location
    Southern Sweden
    Posts
    7

    Unhappy Help with iframe resizing to various screen dimensions

    Hello everyone.

    If my member name didn't give away my level of sophistication, then I will restate the obvious... I am bordering on retard level with HTML amongst other things.

    I am not certain if this is the right thread, and/or forum for this but any help would be appreciated.

    I am trying to resize an <iframe> to fit between other fixed tables or areas. and while I can figure this out with set pixel heights for all the other elements, I am also wanting it the body to resize to 100% of screen dimensions.

    In other words I am trying to allow the <iframe> to resize according to screen dimensions and place it between fixed elements and I would like for only the iframe to scroll.

    This is the base for what I am trying to do:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>

    <body style="width:1024px; height:100%; line-height:175%; margin:auto; font-family:Verdana, Geneva, sans-serif; font-size:13px; background:#003; color:#CCC; overflow-style:marquee-block;">

    <!--header--><table width="100%" height="125" bgcolor="#003366" style="margin-top:0px; border-collapse:collapse;"></table>

    <!--Menu--><table width="100%" height="30" bgcolor="#006699" style="margin-top:10px; border-collapse:collapse;"></table>

    <!--Framed Content--><table width="100%" height="100%" bgcolor="#003366" style="margin-top:10px; border-collapse:collapse;">
    <div style="margin-left:10px;">
    <iframe src="http://www.ikea.se" width="1002" height="100%" scrolling="yes" style="border-radius: 0.3em 0.3em 0.3em 0.3em; border-collapse:collapse; margin-top:10px; position:relative"></iframe>
    </div>
    </table>

    <!--footer--><table height="50px" width="1024" bgcolor="#006699"></table>

    </body>
    </html>


    Obviously the "IKEA" site is just for example purposes.

    Thanks in advance, even if it directions towards a more appropriate forum.

    /Capt

  3. #78
    Join Date
    Jul 2012
    Posts
    8
    AMS Me gusta su trabajo,

    One thing I will like to change. Is there a way to have a multiple file upload with just one input field?

    something like this:
    HTML Code:
    <input id="files" type="file" multiple />

  4. #79
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by bullseye2346 View Post
    AMS Me gusta su trabajo,

    One thing I will like to change. Is there a way to have a multiple file upload with just one input field?

    something like this:
    HTML Code:
    <input id="files" type="file" multiple />
    Gracias, bullseye2346.

    Short answer is: yes, it can be done.

    How to do it is a little bit more complicated. You'll need to modify the javascript file to remove the multiple forms and leave just a single one.

    This form will have the already single hidden iframe as target. The form is automatically submited by javascript on file select, and the iframe gets the result, which is the selected image url, as the image is temporary uploaded.

    You'll need to take this url and use it to display the image wherever you want.

    Actually, the resulting javascript code should be easier than the current one.

    Something more you'd want to modify is the remove image button, which is pretty much the same as the actual one.

    Good luck!

  5. #80
    Join Date
    Jul 2012
    Posts
    8
    Muchas Gracias AMS for your response, I have been working with your code and i am impress in how well you document your code with comments.

    I am still having issues with setting it into a single input form but i was able to easily take out the remove button and replace with an image.

    My other question is about the save button: The demo show that when clicking save button the user is redirected to saved.php. In my case I dont want the user to be redirected. I will like to get the url of the images uploaded echoed on the index.php page instead.


    -PS I am happy Spain won the Eurocup!

  6. #81
    Join Date
    Jul 2012
    Posts
    8
    Disregard my previous comment:

    Muchas Gracias AMS for your response, I have been working with your code and i am impress in how well you document your code with comments.

    I am still having issues with setting it into a single input form but i was able to easily take out the remove button and replace with an image.

    I dont want to take up your valuable time. But could you concretize your helpful tips with actual code?


    -PS I am happy Spain won the Eurocup!
    Last edited by bullseye2346; 07-04-2012 at 03:18 PM.

  7. #82
    Join Date
    Jul 2012
    Posts
    9
    Hello AMS, thanks for the script. I hava a question about how to make a loop whit the images of db because i take the names like this, (image1.jpg, image2.gif, image3.jpg...) can you explain me how to make the loop to call the update function?

    Many thanks

  8. #83
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by bullseye2346 View Post
    Disregard my previous comment:

    Muchas Gracias AMS for your response, I have been working with your code and i am impress in how well you document your code with comments.

    I am still having issues with setting it into a single input form but i was able to easily take out the remove button and replace with an image.

    I dont want to take up your valuable time. But could you concretize your helpful tips with actual code?


    -PS I am happy Spain won the Eurocup!
    Sorry for the delay, too busy.

    You have to set the configuration variable "formsCount" to 1. Thus you'll have just 1 file field.

    I guess, the only thing you need to adapt is the $previewDiv variable. It is taken relative to the file field in the uploadImage() function. You'll now have only one file field, so you have to generate a new image container every time. Example:

    Code:
    var $previewDiv = $('#imagePreviews').append('<div class="imagePreview"></div>');
    (You need to have an element called "imagePreviews" first.)

    This $previewDiv element will be passed to handleResult(), and then to displayImage(), which will display the image.

  9. #84
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by MisterRoshi View Post
    Hello AMS, thanks for the script. I hava a question about how to make a loop whit the images of db because i take the names like this, (image1.jpg, image2.gif, image3.jpg...) can you explain me how to make the loop to call the update function?

    Many thanks
    Sorry, didn't understand well.

    If you want to see where the images loop is performed to store them into the database, you have to follow the configuration variable itemForm.js->insertOrUpdateAjaxUrl. This variable may be 'php/insert.php' or 'php/update.php'.

    If you go to insert.php, you see a call to UploadedFile::moveTempFilesDescriptiveNames().

    If you go there, you'll find the uploaded files loop.

  10. #85
    Join Date
    Jul 2012
    Posts
    9
    Many thanks AMS, i will try to explain better. If i need to update a form with uploaded images, first: show the uploaded images in the form:

    PHP Code:
    $(document).ready(function() {

        if ($(
    'div.imageForms').length) {
            $(
    'div.imageForms').append($.uploaderPreviewer.createImageForms());
    if ($(
    'div.imageForms[images]').length) {
                var 
    imageFilenames = $('div.imageForms[images]').attr('images').split(',');
                $.
    uploaderPreviewer.populateImages(imageFilenames);
                $(
    'div.imageForms[images]').removeAttr('images');
            }
        } 

    <
    div style="margin-left:200px" class="imageForms" images="image1.jpg, image2.gif, image3.gif"
    With the save button i call the update.php

    Inside the update.php i need to call the function updateUpload($tempFilename, $dbFilename, $keywords) of uploadedfiles.php but i have a problem in this point because i dont know how to send the array of the images previously inserted in the db, for the new uploaded images i use $image:

    $imagesCount = $_POST['imagesCount'];
    $images = array();

    for ($i = 1; $i <= $imagesCount; $i++) {
    $images[] = $_POST['image' . $i];
    }


    but how can i send the names of the images names in db?

    Sorry for my english and many thanks!

  11. #86
    Join Date
    May 2009
    Location
    Madrid, Spain
    Posts
    40
    Quote Originally Posted by MisterRoshi View Post
    Many thanks AMS, i will try to explain better. If i need to update a form with uploaded images, first: show the uploaded images in the form:

    PHP Code:
    $(document).ready(function() {

        if ($(
    'div.imageForms').length) {
            $(
    'div.imageForms').append($.uploaderPreviewer.createImageForms());
    if ($(
    'div.imageForms[images]').length) {
                var 
    imageFilenames = $('div.imageForms[images]').attr('images').split(',');
                $.
    uploaderPreviewer.populateImages(imageFilenames);
                $(
    'div.imageForms[images]').removeAttr('images');
            }
        } 

    <
    div style="margin-left:200px" class="imageForms" images="image1.jpg, image2.gif, image3.gif"
    With the save button i call the update.php

    Inside the update.php i need to call the function updateUpload($tempFilename, $dbFilename, $keywords) of uploadedfiles.php but i have a problem in this point because i dont know how to send the array of the images previously inserted in the db, for the new uploaded images i use $image:

    $imagesCount = $_POST['imagesCount'];
    $images = array();

    for ($i = 1; $i <= $imagesCount; $i++) {
    $images[] = $_POST['image' . $i];
    }


    but how can i send the names of the images names in db?

    Sorry for my english and many thanks!
    You have to get the names of the images stored in your database. Example:

    Code:
        $itemId = mysql_real_escape_string($itemId);
    
        $sql = '
    SELECT image1, image2, image3
    FROM items_with_images
    WHERE id_item = "' . $itemId . '"';
    
        $result = mysql_query($sql);
    
        $row = @mysql_fetch_array($result);

  12. #87
    Join Date
    Jul 2012
    Posts
    8
    AMS,

    Thanks for finding the time to reply amongst your busy schedule. I have been able to get several things modified with your help. But once again, I have another inquiry regarding a different issue. I am currently constructing code to upload image names into the DB. For your saved.php I found out that use
    PHP Code:
    $images explode(','$_GET['i']); 
    and I think that using
    PHP Code:
    GET 
    welcomes SQL injection. Can you provide a way to use this save function with
    PHP Code:
     POST 
    ?

  13. #88
    Join Date
    Jul 2012
    Posts
    9
    Hello AMS, many thanks for all your help and i know your time is very important for you.

    I cant update/edit the images, i send the names of stored images and the new images names with the updateUpload function of uploadedFile.php.

    in the update.php file i have the next code:

    require_once('uploadedFile.php');



    $imagesCount = $_POST['imagesCount'];
    $images = array();

    for ($i = 1; $i <= $imagesCount; $i++) {
    $images[] = $_POST['image' . $i];
    }

    $keywords = $_POST['keywords'];

    $images2 = (the names of images in db with comma separated, ex: img1.jpg, img2.gif)
    $savedImages = UploadedFile::updateUpload($images, $images2, $keywords);

    $imageSavingResult = implode(',', $savedImages);


    but the result is always an empty field.

    Sorry for my ignorance, i appreciate your time.

  14. #89
    Join Date
    Jul 2012
    Posts
    8
    Quote Originally Posted by MisterRoshi View Post
    Hello AMS, many thanks for all your help and i know your time is very important for you.

    I cant update/edit the images, i send the names of stored images and the new images names with the updateUpload function of uploadedFile.php.

    in the update.php file i have the next code:

    require_once('uploadedFile.php');



    $imagesCount = $_POST['imagesCount'];
    $images = array();

    for ($i = 1; $i <= $imagesCount; $i++) {
    $images[] = $_POST['image' . $i];
    }

    $keywords = $_POST['keywords'];

    $images2 = (the names of images in db with comma separated, ex: img1.jpg, img2.gif)
    $savedImages = UploadedFile::updateUpload($images, $images2, $keywords);

    $imageSavingResult = implode(',', $savedImages);


    but the result is always an empty field.

    Sorry for my ignorance, i appreciate your time.
    MisterRoshi how are you saving your image names to your database? I am curious to know. I am doing something similar with saving the names to the database. Thanks

  15. #90
    Join Date
    Jul 2012
    Posts
    9
    Hi Bullseyes2346!

    When you click the save button you call the insert.php file.
    Inside the insert.php:

    PHP Code:
    <?php

    require_once('uploadedFile.php');

    $imagesCount $_POST['imagesCount'];

    $images = array();

    for (
    $i 1$i <= $imagesCount$i++) {
        
    $images[] = $_POST['image' $i];
    }

    $keywords $_POST['keywords'];


    $savedImages UploadedFile::moveTempFilesDescriptiveNames($images$keywords);

    $imageSavingResult implode(','$savedImages);




        
    $q1 "insert into tablename (images) values ($imageSavingResult)";

    mysql_query($q1);
    you just have to change the name of the table, and if you have a user ID yo need to indicate the id into the insert. Remember to connect to your db first.

    Sorry for my english, i talk in spanish.

Thread Information

Users Browsing this Thread

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