Flash Documentation:
Although Flash Player has no restriction on the size of files you can upload or download, the player officially supports uploads or downloads of up to 100 MB.
Modern web development implies to make sure whatever you set up degrades gracefully whatever the user setup: PC, mobile phone, with or without javascript and flash plugin installed. The best way is therefore to start with the bare minimum: the html form.
Here is an example of a valid xhtml file upload form. Make sure you give it a unique id attribute, such as "myUploadForm". Note the input field with name ="MAX_FILE_SIZE". Even with javascript disabled, this field will tell the user before actually uploading the file that its size is too big. If javascript is available, jqUploader will use the MAX_FILE_SIZE value as size limitation.
Now, you need to indicate to jqUploader the element containing the file input field to convert to the rich flash UI alternative. This represents a changed compared to versions up to 1.0.1. jqUploader needs the containig element, not the file input field itself. This makes it easier to use the input's label and form tag attributes values and content.
<form id="myUploadForm" enctype="multipart/form-data" action="flash_upload.php" method="POST" class="a_form">
<fieldset>
<legend>Your file</legend>
<ol>
<li class="jqUploader">
<label for="example1">Choose a file to upload: </label>
<input name="MAX_FILE_SIZE" value="1048576" type="hidden" />
<input name="example1" id="example1" type="file" />
</li>
</ol>
</fieldset>
<input type="submit" name="submit" value="Send" />
</form>
Make sure you include the 3 javascript files (in this order: jquery-latest.pack.js, swfobject.js and finally jquery.jqUploader.js) by putting the following code in your <head> tags. Place them wherever you want on your server, and do not forget to specify the path accordingly. In this example, they are sitting in the same folder as your html page.
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="dependencies/swfobject.js"></script>
<script type="text/javascript" src="jquery.jqUploader.js"></script>
Now, you need to activate the script by telling which file input fields you would like to replace. This is made through the use of the jquery javascript framework, which makes javascript coding possible if you understand CSS better than javascript.
For example, the following code will replace the file input fields contained in the < li< element with class="jqUploader".
Add this code inside your <head> tag:
$(document).ready(function(){
$(".jqUploader").jqUploader({
background: "FFFFDF",
barColor: "64A9F6",
allowedExt: "jpg|JPG|jpeg|JPEG"
});
});
This file (specified by default using the form action attribute, should be able to perform the upload with or without javascript enabled. jqUploader, will automatically adds a variable to this script if javascript is present, so you can organize your serverside processing accordingly. Here is an example (flash_upload.php).
/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
jqUploader serverside example: (author : pixeline, http://www.pixeline.be)
when javascript is available, a variable is automatically created that you can use to dispatch all the possible actions
This file examplifies this usage: javascript available, or non available.
1/ a form is submitted
1.a javascript is off, so jquploader could not be used, therefore the file needs to be uploaded the old way
1.b javascript is on, so the file, by now is already uploaded and its filename is available in the $_POST array sent by the form
2/ a form is not submitted, and jqUploader is on
jqUploader flash file is calling home! process the upload.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
$uploadDir = dirname(__FILE__) . '/files/';
$uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);
if ($_POST['submit'] != '') {
// 1. submitting the html form
if (!isset($_GET['jqUploader'])) {
// 1.a javascript off, we need to upload the file
if (move_uploaded_file ($_FILES[0]['tmp_name'], $uploadFile)) {
// delete the file
// @unlink ($uploadFile);
$html_body = '<h1>File successfully uploaded!</h1><pre>';
$html_body .= print_r($_FILES, true);
$html_body .= '</pre>';
} else {
$html_body = '<h1>File upload error!</h1>';
switch ($_FILES[0]['error']) {
case 1:
$html_body .= 'The file is bigger than this PHP installation allows';
break;
case 2:
$html_body .= 'The file is bigger than this form allows';
break;
case 3:
$html_body .= 'Only part of the file was uploaded';
break;
case 4:
$html_body .= 'No file was uploaded';
break;
default:
$html_body .= 'unknown errror';
}
$html_body .= 'File data received: <pre>';
$html_body .= print_r($_FILES, true);
$html_body .= '</pre>';
}
$html_body = '<h1>Full form</h1><pre>';
$html_body .= print_r($_POST, true);
$html_body .= '</pre>';
} else {
// 1.b javascript on, so the file has been uploaded and its filename is in the POST array
$html_body = '<h1>Form posted!</h1>Error:<pre>';
$html_body .= print_r($_POST, false);
$html_body .= '</pre>';
}
myHtml($html_body);
} else {
if ($_GET['jqUploader'] == 1) {
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// 2. performing jqUploader flash upload
if ($_FILES['Filedata']['name']) {
if (move_uploaded_file ($_FILES['Filedata']['tmp_name'], $uploadFile)) {
// delete the file
// @unlink ($uploadFile);
return $uploadFile;
}
} else {
if ($_FILES['Filedata']['error']) {
return $_FILES['Filedata']['error'];
}
}
}
}
// /////////////////// HELPER FUNCTIONS
function myHtml($bodyHtml)
{
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqUploader demo - Result</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</head>
<body>
<?php echo $bodyHtml;
?>
</body>
</html>
<?php
}