943,734 Members | Top Members by Rank

Ad:
  • PHP Discussion Thread
  • Unsolved
  • Views: 2707
  • PHP RSS
You are currently viewing page 1 of this multi-page discussion thread
Jan 16th, 2009
0

unlimited file upload fields

Expand Post »
I wand to give the user the ability to upload as many pictures as he wants to. at present I hava a fexed amount of browse fields wich the user can use to select pictures... the code looks something like this :

PHP Syntax (Toggle Plain Text)
  1.  
  2. <?PHP
  3.  
  4. $max_file_size = 3000000;
  5.  
  6. ECHO "<FORM NAME=name ID=name ACTION=submit.php enctype='multipart/form-data' METHOD=post >";
  7.  
  8. ... code ...
  9.  
  10. ECHO "<input type='hidden' name='MAX_FILE_SIZE' value = $max_file_size > ";
  11.  
  12. ECHO "<input id='file1' type='file' name='file[]'><BR>";
  13. ECHO "<input id='file2' type='file' name='file[]'><BR>";
  14. ECHO "<input id='file3' type='file' name='file[]'><BR>";
  15.  
  16. ... code...
  17.  
  18. ECHO "<BR><INPUT TYPE = submit NAME = submit VALUE = 'blah '>";
  19.  
  20. ECHO "</FORM>";
  21.  
  22. ?>

On the other page I have code that builds a unick name for each uploaded picture, then makes a directory and copies the selected pictures in that directory.
This part works properly.

Then I have a few lines of code that build the link to each of those files in part and uploads it in to a DB... the website then accesses those pics via the links wich it takes from the DB.

Now on the DB, the images have their own table... it has two main columns... "largepic" and "smallpic". smmallpic is the thumbnail and largepic is the image that is displayed when users click on the thumbnail to view the full pic.

Now I need to figure out a way in wich to submit these pictures in groups of two. and process them in solid groups of two too.

SO I was thinking maybe on the upload page only two browse buttons would be shown... when the user fills bolth of them, another two apear beneath them (I'm guessing something like this can be done with ajax scripts somehow)... maybe with building the name of each field as a string first with a numeric value as part of the name that one can increment each time a new set of fields is needed.

But how do I go about the saving of the parh to the DB? the solid groups of two links need to be identifyable somehow so that you can target them when putting the links in the db since the first field needs to point to the first column and the second needs to point to the second.

If it was a set number of fields it would be easy to just write the upload proecess for each field... but for a limitless amount of fields ( namelly a new set of fields pops up as soon as the last set is filled... and, sheesh... lots of complications, if the user delets the pics in a field in the middlle of two other sets only that set of fields has to disapear and the others realocated... I am lost... )

How do you supose I could go about this unlimited image upload procedure?
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
marcmm is offline Offline
42 posts
since Oct 2008
Jan 16th, 2009
0

Re: unlimited file upload fields

use javascript for the automatic addition of "browse" field and javascript for the deletion.
Reputation Points: 7
Solved Threads: 1
Junior Poster in Training
it2051229 is offline Offline
82 posts
since May 2007
Jan 16th, 2009
0

Re: unlimited file upload fields

you set up a numbering structure so that the thumbnail and full picture share a common filename,
the database only needs one picture name

the thumbnail is thumb100004.jpg
and the fullsize picture is 100004.jpg
the only thing needed is 100004.jpg
the thumbnail is
<img src='thumb<php echo'/*sql to get $number.jpg*/'; ?>' onclick='bigimage.src=<?php echo $number.jpg ?>'>

down the bottom of the page is
<img id='bigimage' src='blank.jpg'>
waiting to be filled with the contents of the clicked thumbnail

the thumbnail can be generated on the fly by php so only one file need be stored

dirty unchecked code, thought process only
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Jan 19th, 2009
0

Re: unlimited file upload fields

For starters, if you name every field just like you have been, on the php side you will be able to access each individual file as a numerical array.

Now for adding and removing the file fields dynamically i'll refer you to my favorite prototype tutorial, which i have posted before: http://www.phpriot.com/articles Read the 8 Weeks of Prototype tutorials in order, even just look them over and at the examples and it should be easy to figure that out.

As for naming conventions, use a timestamp from time() or mktime() (although i believe mktime() throws an E_STRICT violation now). and add something unique, maybe the username to it etc.

Generally how i handle thumbnails is such:
First I create two directories, one that holds the large version and one that holds the thumbnails. 800 and 150 or full and thumb or anything that works with your conventions. I would caution against generating the thumbnails on the fly. Image processing can be very resource intensive and if you're displaying a lot of thumbnails on one page that will not scale well. disk space however is cheap and a lot easier to expand as necessary then more memory/processing power.

Then when i process the images i resize the uploaded file to the 800 and then resize the 800 to the 150, and save them both as the SAME filename but in different folders. This is where you will see the performance gain. You do two resizing operations and that is it for ever, unless of course you decide to change your thumbnail sizes.

In your case i'd say your best bet would be to create an "images" table in mysql and then use a many to many relationship to join a user to any number of images. In the images table simply storing some information about a particular image. filename, size? type? the date is was created?

//images
pk_imageid
filename
date_created

//users_images_join
fk_userid
fk_imageid

Or something like that.

When you pull all your images out, if you're displaying a thumbnail you use domain.com/images/150/filename.jpg and when you are displaying the full size domain.com/images/800/filename.jpg

Using a timestamp and a unique identifier, like a username (
1232375747_username.jpg) or userid (
1232375747_137.jpg) ensures that there is no way for two users to generate the same image, even if both of them would submit it at exactly the same time.
Sponsor
Reputation Points: 265
Solved Threads: 126
Practically a Master Poster
mschroeder is offline Offline
624 posts
since Jul 2008
Jan 19th, 2009
0

Re: unlimited file upload fields

Here is a little something I use, It's rough and could be greatly improved but it works. One problem I notice is that the new div is created inside the previous so it keeps getting bigger and pushes everything below it down. That div is needed because or else the previous information in the input will be delete. But here it is work on it... let me know how it goes.

PHP Syntax (Toggle Plain Text)
  1. <script>
  2. //n = name (upload)
  3. //t = this input
  4. //c = counter
  5.  
  6. function createNew(n,t,c){
  7. //counter NEXT
  8. c2 = c+1;
  9.  
  10. //Start: Make input
  11. newer = "<input name='"+n+"_"+c2+"' type='file' onclick='javascript:createNew(\""+n+"\",this,"+c2+");' />";
  12.  
  13. //End: New div for next
  14. newer += "<div id='Extras"+n+c2+"'>&nbsp;</div>";
  15.  
  16. //Outputs whats created
  17. document.getElementById('Extras'+n+c).innerHTML += newer+"<br />";
  18.  
  19. //Updates hidden counter
  20. document.getElementById(n+"count").value = c;
  21.  
  22. //remove onclick
  23. t.onclick = "";
  24.  
  25. }
  26. </script>
  27.  
  28. <form action="" method="post" />
  29. &n<input name='upload_1' type='file' onclick='javascript:createNew("upload",this,1);' >
  30. <div id="Extrasupload1">&nbsp;</div>
  31. <input type='hidden' id='uploadcount' name='uploadcount' value='0' />
  32. <input type="submit" value="Submit" />
  33. </form>
Reputation Points: 10
Solved Threads: 4
Light Poster
jrdark13 is offline Offline
38 posts
since Jan 2009
Jan 20th, 2009
0

Re: unlimited file upload fields

html Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <script type="text/javascript" src="jquery-1.3.min.js"></script>
  6. <script type="text/javascript">
  7. //Make sure the document is loaded
  8. $(document).ready(function(){
  9. //Watch clicks on the add button
  10. $(":input[name='add']").click(function () {
  11. $("div[id='file']:last").clone(true).insertAfter("div[id='file']:last");
  12. });
  13.  
  14. //Watch clicks on the remove button
  15. $(":input[name='sub']").click(function () {
  16. $("div[id='file']:last").remove();
  17. });
  18. });
  19. </script>
  20.  
  21. </head>
  22.  
  23. <body>
  24. <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  25. <div id="file"><input type="file" name="file[]" id="file"/></div>
  26. <div id="file"><input type="file" name="file[]" id="file"/></div>
  27. </form>
  28. <div><input name="add" type="button" value="+ 1" /><input name="sub" type="button" value="- 1" /></div>
  29. </body>
  30. </html>

I know i posted a link to a prototype tutorial earlier, but this is a jQuery example, that is very basic but achieves the same thing posted above, and adds the ability to remove the last field too.

It could use some error checking, like checking if the only file field has been removed etc. Or creating a new file field if all of them have been deleted.

Just some food for thought but this is really javascript related not php.
Sponsor
Reputation Points: 265
Solved Threads: 126
Practically a Master Poster
mschroeder is offline Offline
624 posts
since Jul 2008
Jan 27th, 2009
0

Re: unlimited file upload fields

thanks for the suggestion guys... I managed to skip a lot of headakes simply by doing the entire picture upload on a separate page. and I've got the upload working, the saving of files, placing in directory, naming, saving paths to DB, and accessing them from the website.

But now one more problem remains. for the admin there needs to be a checkbox next to each image detailing weather the image will display on the website or not. basicly there's a field in the DB that is either 1 or 0 and when the images are displayed on the website they check weather that field is 1 or 0... if it's 0 the pic is not displayed whille if the value is 1 the image is displayed.

I incorporated that checkbox in the file upload area so the user can choose weather to display the image on the website or not. but naturally he needs to have an option to edit that on the same page for each individual image.

so on the same page as the image upload, I made a for loop that will display all images that have a path in the DB.

PHP Syntax (Toggle Plain Text)
  1.  
  2. INCLUDE('conect.php');
  3.  
  4.  
  5. $sql_pics = "SELECT pics.smallpic, pics.largepic, pics.vizible, pics.ID
  6. FROM pics
  7. WHERE (pics.ID = '$VALUEl' )";
  8.  
  9. $rez_pics = mysql_query($sql_pics) OR DIE (mysql_error());
  10.  
  11. $lines_pics = mysql_num_rows($rez_pics);
  12.  
  13. FOR ($i=0; $i<$lines_pics; $i++)
  14. {
  15.  
  16. $smallpic = mysql_result ($rez_pics, $i, 'smallpic');
  17. $largepic = mysql_result ($rez_pics, $i, 'largepic');
  18.  
  19. ECHO "<A HREF = '$largepic' target='_blank'> <IMG SRC = '$smallpic' BORDER='0'></IMG> </A><BR>";
  20.  
  21. }

and for each of these pics I inclouded a checkbox that is either checked or unchecked based on what the vizible value is in the DB for each coresponding pic :

PHP Syntax (Toggle Plain Text)
  1.  
  2. $vizible = mysql_result ($rez_pics, $i, 'vizible');
  3.  
  4. IF ($vizible == 1)
  5. {
  6. ECHO "<INPUT TYPE='checkbox' NAME=viz ID=viz CHECKED='checked' > Vizible";
  7. }
  8. ELSE
  9. {
  10. ECHO "<INPUT TYPE='checkbox' NAME=viz ID=viz> Vizible";
  11. }

Now what I want to do is to implement a way in wich if the user checks or unchecks that checkbox, a function would be executed that will change the vizible field in the DB to 1 or 0 acording to weather the the checkbox is checked or not... and the results must be automaticly reloaded on the page... to that end I was thinking of using ajax scripts so that I wouldn't have to reload the entire page ( actually reloading the entire page isn't even an option )... so I was thinking of doing something like this (the $VALUE thing is necesary to identify wichset of pics the edited pic is from so that value must be transmitted through the ajax scripts):

PHP Syntax (Toggle Plain Text)
  1.  
  2. <HTML>
  3. <HEAD>
  4.  
  5. <script src="check.js"></script>
  6.  
  7. </HEAD>
  8. <BODY>
  9.  
  10. <?PHP
  11.  
  12. ECHO "<span id='vize'>";
  13.  
  14. ... entire code with displaying the images listed here ...
  15.  
  16. IF ($vizible == 1)
  17. {
  18. ECHO "<INPUT TYPE='checkbox' NAME=viz ID=viz CHECKED='checked' onMouseUp=\"vizib(this.value,'$IVALUE')\"> Vizible";
  19. }
  20. ELSE
  21. {
  22. ECHO "<INPUT TYPE='checkbox' NAME=viz ID=viz onMouseUp=\"vizib(this.value,'$VALUE')\"> Vizible";
  23. }
  24.  
  25. ECHO "</span>";
  26.  
  27. ?>
  28. </BODY>
  29. </HTML>

the check.js contains:

PHP Syntax (Toggle Plain Text)
  1.  
  2. var xmlHttp
  3.  
  4. //-------------------------------
  5.  
  6. function vizib(str1,str2)
  7. {
  8. xmlHttp=GetXmlHttpObject()
  9. if (xmlHttp==null)
  10. {
  11. alert ("Browser does not support HTTP Request")
  12. return
  13. }
  14.  
  15. var url="vizible.php"
  16. url=url+"?q="+str1+"&p="+str2
  17. url=url+"&sid="+Math.random()
  18. xmlHttp.onreadystatechange=stateChangedviz
  19. xmlHttp.open("GET",url,true)
  20. xmlHttp.send(null)
  21.  
  22. function stateChangedviz()
  23. {
  24. if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  25. {
  26. document.getElementById("vize").innerHTML=xmlHttp.responseText
  27. }
  28. }
  29.  
  30. //----------------------------------
  31.  
  32. function GetXmlHttpObject()
  33. {
  34. var xmlHttp=null;
  35. try
  36. {
  37. // Firefox, Opera 8.0+, Safari
  38. xmlHttp=new XMLHttpRequest();
  39. }
  40. catch (e)
  41. {
  42. //Internet Explorer
  43. try
  44. {
  45. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  46. }
  47. catch (e)
  48. {
  49. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  50. }
  51. }
  52. return xmlHttp;
  53. }

and the vizible.php contains:

PHP Syntax (Toggle Plain Text)
  1.  
  2. <HTML>
  3.  
  4. <HEAD>
  5. <script src="check.js"></script>
  6. </HEAD>
  7.  
  8. <BODY>
  9.  
  10. <?PHP
  11.  
  12. INCLUDE('conect.php');
  13.  
  14. $q=$_GET["q"];
  15.  
  16. $p=$_GET["p"];
  17.  
  18. ... code for updating the DB field vizible from the set marked by $p wich is $VALUE from the first file and put either 1 or 0 in it weather the checkbox si either checked or not ( reflected in the $q variable wich should hoald the checkbox's state. )
  19.  
  20. ... code with displaying the images listed here allong with checkboxes and function links ...
  21.  
  22. ?>
  23.  
  24. however... I get a number of problems with this aproach... first of all the escaped \" symbols seem to be interfearing with the function somehow as it won't execute...
  25.  
  26. also... this.value for a checkbox always seems to return "on" reguardless if the checkbox is checked or not...
  27.  
  28. and I'm not sure that transfering 2 variables through the ajax scripts works the way I typed above...
  29.  
  30. any suggestions for this?
  31.  
  32. </BODY>
  33. </HTML>
  34.  
Last edited by marcmm; Jan 27th, 2009 at 1:03 pm.
Reputation Points: 10
Solved Threads: 0
Light Poster
marcmm is offline Offline
42 posts
since Oct 2008
Jan 27th, 2009
0

Re: unlimited file upload fields

Starting from scratch with AJAX is completely unnecessary.
There are many fine Javascript libraries that exist for this reason.

Again I recommend you look at jQuery or Prototype.

This is not a solution for your issue but is an example that you should be able to manipulate to get your result:

html Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. //Wait for the document to be ready
  9. $(document).ready(function(){
  10.  
  11. //Listen for a click on every checkbox
  12. $("input:checkbox").click(function () {
  13. var val = $(this).val();
  14. var name = $(this).attr('name');
  15. //This is so IE does not cache the results
  16. var noCache = new Date();
  17.  
  18. //Make a JSON request
  19. $.getJSON('ajax.php', {'item':name, 'val':val, '_':noCache.getTime()}, function(json){
  20. $("[name='" + json.item + "']").attr('value', json.check )
  21. });
  22.  
  23. });
  24.  
  25. //Change the value of the checkbox to 1 or 0
  26. function updateElement(json)
  27. {
  28. //Update the checkbox and change the value status
  29. $("[name='" + json.item + "']").attr('value', json.check )
  30. }
  31. });
  32.  
  33. </script>
  34. </head>
  35. <body>
  36.  
  37. Item 1 <input type="checkbox" name="1" id="viz" value="0"/> <br />
  38. Item 2 <input type="checkbox" name="2" id="viz" value="0"/> <br />
  39. Item 3 <input type="checkbox" name="3" id="viz" value="0"/> <br />
  40. Item 4 <input type="checkbox" name="4" id="viz" value="0"/> <br />
  41. </body>
  42. </html>

And now for php file:
php Syntax (Toggle Plain Text)
  1. <?php
  2.  
  3. //Make sure we aren't caching this file
  4. header('Cache-Control: no-cache, must-revalidate');
  5. header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
  6. header('Content-type: application/json');
  7.  
  8. //Do some sql statements etc, and make the necessary changes using the get item value etc.
  9.  
  10. //return some json for demonstration
  11.  
  12. $val = 0;
  13. if( $_GET['val'] == 0)
  14. {
  15. $val = 1;
  16. }
  17.  
  18. $arr = array (
  19. 'item'=>$_GET['item'],
  20. 'check'=>$val
  21. );
  22.  
  23. echo json_encode($arr);
Last edited by mschroeder; Jan 27th, 2009 at 4:37 pm.
Sponsor
Reputation Points: 265
Solved Threads: 126
Practically a Master Poster
mschroeder is offline Offline
624 posts
since Jul 2008
Jan 28th, 2009
0

Re: unlimited file upload fields

I'm having a hard time figuring out what is going on in there... but anyways... can somebody please tell me how I could get the value of a checkbox when the user clicks it?

I tryed onclick function(this.value) or on mouseup function ( this.value)

and tryed echoing it on the file the function would open...

but this.value for the checkbox ALWAYS returned "on" reguardless if it was checked or not...

wich leads me to either think that it was only executing the function ONCE when the user first clicked the checkbox and then for some reason it didn't fire no matter how many times the user would re-click it...

or that this.value always returns on for the checkbox reguardless what state it is in...

so, can anybody give me a clue about this?
Reputation Points: 10
Solved Threads: 0
Light Poster
marcmm is offline Offline
42 posts
since Oct 2008
Jan 28th, 2009
1

Re: unlimited file upload fields

I'm not seeing whats so difficult with the code i posted.
I tend to believe the problem is, you don't want to look at, and apply the concepts to your code, you simply want the exact solution to your problem.

The code I posted not only handles the click events on EVERY checkbox on the page but also provides the mechanisms for capturing the value of the checkbox and the name of the field.

It also handles the AJAX request. The only difference is I used a function designed for returning JSON as an example of the flexibility you gain by working with a javascript library. You could just as simply make an ajax call with $.ajax and return xml or anything else you would like.

If my solution doesn't appease you, then I would suggest having a look here.
Sponsor
Reputation Points: 265
Solved Threads: 126
Practically a Master Poster
mschroeder is offline Offline
624 posts
since Jul 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in PHP Forum Timeline: header probs..
Next Thread in PHP Forum Timeline: Image Resizing with PHP





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC