Using a Form to Upload Different Items

I have a form to upload something. On the form there's the usual title, category, sub cat etc which are all fine. I do have 2 individual uploads though which at the moment I open a new window to upload the first item and on clicking submit it will post the image into the form. I can't do this with the second item though as it will refresh the form and I'll lose the first item, so I copy and paste the outputted link.

This works fine for me, but it needs to be more user-friendly.

I could do it in Flash, but would rather avoid it due to compatibility issues.

Is there a way I could do it in Javascript or JQuery?

I can upload multiple items in JQuery but not different uploads.

1 is an image, the other is a PDF.

I did think about using an iFrame, but would this be an acceptable standard and/or would this affect anything such as if the users antivirus detects it?

Any advise is welcomed.

Cheers.

 

why can't you do that.

I would stay away from iframes personally,

 

I would rather not use iFrames.

When I said upload multiple items in jQuery, I mean 1 uploader to upload multiple items but I'm not very good with jQuery so I'm unsure if I could simply duplicate the code and it will work...

I don't really know what to search for either because as soon as I type "upload multiple items jquery" I'm just getting 'upload multiple images' etc but I need a dual uploader...

 

sorry still not getting what the difference between
'upload multiple images' and 'dual uploader' is

 

Never mind, I posed a stupid question (lack of sleep) I don't know why I was doing it twice when I simply pass everything through the same script...

 

lol thats what I was thinking.

 

Thanks anyway.

 

first, reading your post, I am thinking, you know html, form, js and jquery but why you did separate upload ?
now I know why we need sleep..

case closed..

 

Okay, back to this.

I'm now using just 1 form to upload both an image and PDF. I've never done this before but the problem I'm encountering is the name $_FILES this won't work for 2 uploads on 1 form will it? If it does, how do I declare the individual files.

This is my image uploader which works fine, it uploads the image and creates a thumbnail version of the image:

//Check if the user submitted the subscribe form

if (isset($_POST['submitpub'])) { 

include "../../includes/head.php";

//Post variables
$issue_number = $_POST['issue_number'];
$publication_id = $_POST['publication_id'];

//$bigimg = $_POST['bigimg'];
//$smallimg = $_POST['smallimg'];
//$pdf = $_POST['pdf'];

$upload_date = date('Y-m-d');

//Get category ID from pub ID
				$resultb=mysql_query("
					SELECT * FROM publication WHERE id = '$publication_id'
					
				
				");
				
				
				while ($rowb=mysql_fetch_array($resultb)) {
				
				
				$cat = $rowb['subcat'];
					}

//Get image, duplicate and make smaller
 if (empty($_FILES["file"]["name"]))# make sure that the file is not empty to avoid error
 {
    echo "Please select an image to upload";
    exit;
 }
 $uploadedfile = $_FILES['file']['tmp_name'];
 $file_name = stripslashes($_FILES['file']['name']);
 
// random 4 digit to add to our file name 
// some people use date and time in stead of random digit 
$random_digit=time();

//combine random digit to you file name to create new file name
//use dot (.) to combile these two variables

$file_name=$random_digit.$file_name;

 #get the file extension
 $boss = explode(".", strtolower($file_name));
 $extension = strtolower(end($boss)); #make it lowercase with strtower
 $array = array('jpg', 'jpeg', 'png', 'gif'); # store all allowed file type in array
 if (!in_array($extension, $array))
    #see if file type is in array else stop execution
 {
    echo "invalid file type";
    exit;
 }
 $size = filesize($_FILES['file']['tmp_name']);
 if ($size > 50000000) # check file size in kilobits
 {
    echo "image size is too big";
    exit;
 }
#image processing start
 if ($extension == "jpg" || $extension == "jpeg")
 {
    $src = imagecreatefromjpeg($uploadedfile);
 } else
    if ($extension == "png")
    {
       $src = imagecreatefrompng($uploadedfile);
    } else
    {
       $src = imagecreatefromgif($uploadedfile);
    }
    list($width, $height) = getimagesize($uploadedfile); # get the width and height of our image
 if ($width < 509)#set the maximum width of the large image
 {
    $newwidth = $width;
 } else
 {
    $newwidth = 722;#set the maximum heigth of the large image
 };
 if ($width < 100)#set the maximum width of the thumbnail
 {
    $newwidth1 = $width;
 } else
 {
    $newwidth1 = 120;#set the maximum heigth of the thumbnail
 };
 $newheight = ($height / $width) * $newwidth;
 $tmp = imagecreatetruecolor($newwidth, $newheight);
 $newheight1 = ($height / $width) * $newwidth1;
 $tmp1 = imagecreatetruecolor($newwidth1, $newheight1);
 imagecopyresampled($tmp, $src, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
 imagecopyresampled($tmp1, $src, 0, 0, 0, 0, $newwidth1, $newheight1, $width, $height);
 $filename = "../../../uploader/image/".$file_name;#upload image to image folder
 $filename1 = "../../../uploader/image/small_".$file_name;#I uploaded thumbnail to the same folder with small_ prefix to the file name. You can also choose to upload thumbnail in a separate folder
 imagejpeg($tmp, $filename, 100);
 imagejpeg($tmp1, $filename1, 100);
 imagedestroy($src);
 imagedestroy($tmp);
 imagedestroy($tmp1);
}

PHP:

Then this is my PDF uploader:

//Images uploaded, proceed to upload publication


//check if directory exists, if not create it
if(!is_dir('../../../uploader/file')){

	 mkdir('../../../uploader/file');
	$target='../../../uploader/file/'.basename($_FILES['uploaded']['tmp_name'].'.pdf');
	if(move_uploaded_file($_FILES['uploaded']['tmp_name'],$target)){

 }

	//output error
 else {
 echo "Sorry, there was a problem uploading your pdf file.";
 }

	//start to move the uploaded pdf file
 else {
	$random_digit=time();
	 $target='../../../uploader/file/'.basename($_FILES['uploaded']['tmp_name'].$random_digit.'.pdf');
	if(move_uploaded_file($_FILES['uploaded']['tmp_name'],$target)){


	
		echo "<label><h3>Copy & paste file name into publication issue form</h3></label>";
		echo "<input type='text' value='".basename( $_FILES['uploaded']['tmp_name']). "$random_digit.pdf' name='pdf'>";

 }
 else {
 echo "Sorry, there was a problem uploading your file.";
 }

	 }

PHP:

PHP.net suggests using something like:

<input type="file" name="userfile[]" id="image"><br />
<input type="file" name="userfile[]" id="pdf">

HTML:

And adding a key to the userfile[]. I will be uploading the image to an image folder and the pdf to a pdf folder, so would this be a viable option? If so, what would be the best way to go about it?