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

Printable View

Show 40 post(s) from this thread on one page

02-12-2012, 06:29 AM
AMS

Quote:

Originally Posted by pds

'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!
02-15-2012, 12:10 AM
Capt Newbie

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;">

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

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

<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>

<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 :o
07-02-2012, 09:34 PM
bullseye2346

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 />
07-04-2012, 12:15 PM
AMS

Quote:

Originally Posted by bullseye2346

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!
07-04-2012, 01:36 PM
bullseye2346

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!
07-04-2012, 02:58 PM
bullseye2346

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!
07-11-2012, 12:26 AM
MisterRoshi

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
07-13-2012, 05:38 PM
AMS

Quote:

Originally Posted by bullseye2346

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.
07-13-2012, 05:46 PM
AMS

Quote:

Originally Posted by MisterRoshi

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.
07-13-2012, 11:29 PM
MisterRoshi

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!
07-14-2012, 11:32 AM
AMS

Quote:

Originally Posted by MisterRoshi

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);
07-16-2012, 12:56 PM
bullseye2346

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

?
07-16-2012, 11:07 PM
MisterRoshi

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.
07-16-2012, 11:28 PM
bullseye2346

Quote:

Originally Posted by MisterRoshi

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
07-16-2012, 11:40 PM
MisterRoshi

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.

Show 40 post(s) from this thread on one page