I am a photographer and I working on a website to teach and train students. I have currently made a very detailed website, but photo uploading management is kicking my butt. I first begin with an iFrame. The code follows,
Code: Select all
<?PHP
include('../functions.php');
if($loggedinid="")
{
header( 'Location: http://lightgraspers.com/login.php' ) ;
}
//session_start();
//$_SESSION['pid']=$_SERVER['QUERY_STRING'];
//$loggedinid=$_SESSION['uid'];
//$_SESSION['pid']=$pid;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Queued Photo Uploader - Standalone Showcase from digitarald.de</title>
<meta name="author" content="Harald Kirschner, digitarald.de" />
<meta name="copyright" content="Copyright 2009 Harald Kirschner" />
<!-- Framework CSS -->
<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="http://github.com/joshuaclayton/blueprint-css/raw/master/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if lte IE 7]>
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools.js"></script>
<script type="text/javascript" src="source/Swiff.Uploader.js"></script>
<script type="text/javascript" src="source/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="http://github.com/mootools/mootools-more/raw/master/Source/Core/Lang.js"></script>
<script type="text/javascript" src="source/FancyUpload2.js"></script>
<!-- See script.js -->
<script type="text/javascript">
//<![CDATA[
/**
* FancyUpload Showcase
*
* @license MIT License
* @author Harald Kirschner <mail [at] digitarald [dot] de>
* @copyright Authors
*/
window.addEvent('domready', function() { // wait for the content
// our uploader instance
var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
// we console.log infos, remove that in production!!
verbose: true,
// url is read from the form, so you just have to change one place
url: $('form-demo').action,
// path to the SWF file
path: 'source/Swiff.Uploader.swf',
// remove that line to select all files, or edit it, add more items
typeFilter: {
'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
},
// this is our browse button, *target* is overlayed with the Flash movie
target: 'demo-browse',
// graceful degradation, onLoad is only called if all went well with Flash
onLoad: function() {
$('demo-status').removeClass('hide'); // we show the actual UI
$('demo-fallback').destroy(); // ... and hide the plain form
// We relay the interactions with the overlayed flash to the link
this.target.addEvents({
click: function() {
return false;
},
mouseenter: function() {
this.addClass('hover');
},
mouseleave: function() {
this.removeClass('hover');
this.blur();
},
mousedown: function() {
this.focus();
}
});
// Interactions for the 2 other buttons
$('demo-clear').addEvent('click', function() {
up.remove(); // remove all files
return false;
});
$('demo-upload').addEvent('click', function() {
up.start(); // start upload
return false;
});
},
// Edit the following lines, it is your custom event handling
/**
* Is called when files were not added, "files" is an array of invalid File classes.
*
* This example creates a list of error elements directly in the file list, which
* hide on click.
*/
onSelectFail: function(files) {
files.each(function(file) {
new Element('li', {
'class': 'validation-error',
html: file.validationErrorMessage || file.validationError,
title: MooTools.lang.get('FancyUpload', 'removeTitle'),
events: {
click: function() {
this.destroy();
}
}
}).inject(this.list, 'top');
}, this);
},
/**
* This one was directly in FancyUpload2 before, the event makes it
* easier for you, to add your own response handling (you probably want
* to send something else than JSON or different items).
*/
onFileSuccess: function(file, response) {
var json = new Hash(JSON.decode(response, true) || {});
if (json.get('status') == '1') {
file.element.addClass('file-success');
file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
} else {
file.element.addClass('file-failed');
file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
}
},
/**
* onFail is called when the Flash movie got bashed by some browser plugin
* like Adblock or Flashblock.
*/
onFail: function(error) {
switch (error) {
case 'hidden': // works after enabling the movie and clicking refresh
alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
break;
case 'blocked': // This no *full* fail, it works after the user clicks the button
alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
break;
case 'empty': // Oh oh, wrong path
alert('A required file was not found, please be patient and we fix this.');
break;
case 'flash': // no flash 9+ :(
alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
}
}
});
});
//]]>
</script>
<!-- See style.css -->
<style type="text/css">
/**
* FancyUpload Showcase
*
* @license MIT License
* @author Harald Kirschner <mail [at] digitarald [dot] de>
* @copyright Authors
*/
/* CSS vs. Adblock tabs */
.swiff-uploader-box a {
display: none !important;
}
/* .hover simulates the flash interactions */
a:hover, a.hover {
color: red;
}
#demo-status {
padding: 10px 15px;
width: 420px;
border: 1px solid #eee;
}
#demo-status .progress {
background: url(assets/progress-bar/progress.gif) no-repeat;
background-position: +50% 0;
margin-right: 0.5em;
vertical-align: middle;
}
#demo-status .progress-text {
font-size: 0.9em;
font-weight: bold;
}
#demo-list {
list-style: none;
width: 450px;
margin: 0;
}
#demo-list li.validation-error {
padding-left: 44px;
display: block;
clear: left;
line-height: 40px;
color: #8a1f11;
cursor: pointer;
border-bottom: 1px solid #fbc2c4;
background: #fbe3e4 url(assets/failed.png) no-repeat 4px 4px;
}
#demo-list li.file {
border-bottom: 1px solid #eee;
background: url(assets/file.png) no-repeat 4px 4px;
overflow: auto;
}
#demo-list li.file.file-uploading {
background-image: url(assets/uploading.png);
background-color: #D9DDE9;
}
#demo-list li.file.file-success {
background-image: url(assets/success.png);
}
#demo-list li.file.file-failed {
background-image: url(assets/failed.png);
}
#demo-list li.file .file-name {
font-size: 1.2em;
margin-left: 44px;
display: block;
clear: left;
line-height: 40px;
height: 40px;
font-weight: bold;
}
#demo-list li.file .file-size {
font-size: 0.9em;
line-height: 18px;
float: right;
margin-top: 2px;
margin-right: 6px;
}
#demo-list li.file .file-info {
display: block;
margin-left: 44px;
font-size: 0.9em;
line-height: 20px;
clear
}
#demo-list li.file .file-remove {
clear: right;
float: right;
line-height: 18px;
margin-right: 6px;
} </style>
</head>
<body>
<div class="container">
<!-- See index.html -->
<div>
<form action="server/script.php" method="post" enctype="multipart/form-data" id="form-demo">
<fieldset id="demo-fallback">
<label for="demo-photoupload">
Upload a Photo:
<input type="file" name="Filedata" />
</label>
</fieldset>
<div id="demo-status" class="hide">
<p><?php echo "$conid", "$loggedin", "$loggedinid", "$pid", $_GET['pid'] ?>
<a href="#" id="demo-browse">Browse Files</a> |
<a href="#" id="demo-clear">Clear List</a> |
<a href="#" id="demo-upload">Start Upload</a>
</p>
<div>
<strong class="overall-title"></strong><br />
<img src="assets/progress-bar/bar.gif" class="progress overall-progress" />
</div>
<div>
<strong class="current-title"></strong><br />
<img src="assets/progress-bar/bar.gif" class="progress current-progress" />
</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>
</form> </div>
</div>
</body>
</html>
Here is the script.php information:
Code: Select all
<?php
include('../../functions.php');
// Request log
/**
* You don't need to log, this is just for the showcase. Better remove
* those lines for production since the log contains detailed file
* information.
*/
$result = array();
$result['time'] = date('r');
$result['addr'] = substr_replace(gethostbyaddr($_SERVER['REMOTE_ADDR']), '******', 0, 6);
$result['agent'] = $_SERVER['HTTP_USER_AGENT'];
if (count($_GET)) {
$result['get'] = $_GET;
}
if (count($_POST)) {
$result['post'] = $_POST;
}
if (count($_FILES)) {
$result['files'] = $_FILES;
}
// we kill an old file to keep the size small
//if (file_exists('script.log') && filesize('script.log') > 102400) {
// unlink('script.log');
//}
//$log = @fopen('script.log', 'a');
//if ($log) {
// fputs($log, print_r($result, true) . "\n---\n");
// fclose($log);
//}
// Validation
$error = false;
if (!isset($_FILES['Filedata']) || !is_uploaded_file($_FILES['Filedata']['tmp_name'])) {
$error = 'Invalid Upload';
}
/**
* You would add more validation, checking image type or user rights.
*
if (!$error && $_FILES['Filedata']['size'] > 2 * 1024 * 1024)
{
$error = 'Please upload only files smaller than 2Mb!';
}
if (!$error && !($size = @getimagesize($_FILES['Filedata']['tmp_name']) ) )
{
$error = 'Please upload only images, no other files are supported.';
}
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8) ) )
{
$error = 'Please upload only images of type JPEG, GIF or PNG.';
}
if (!$error && ($size[0] < 25) || ($size[1] < 25))
{
$error = 'Please upload an image bigger than 25px.';
}
*/
// Processing
/**
* Its a demo, you would move or process the file like:
*
* move_uploaded_file($_FILES['Filedata']['tmp_name'], '../uploads/$loggedinid/' . $_FILES['Filedata']['name']);
* $return['src'] = '/uploads/$loggedinid' . $_FILES['Filedata']['name'];
*
* or
*
* $return['link'] = YourImageLibrary::createThumbnail($_FILES['Filedata']['tmp_name']);
*
*/
if ($error) {
$return = array(
'status' => '0',
'error' => $error
);
} else {
$return = array(
'status' => '1',
'name' => $_FILES['Filedata']['name']
);
// Our processing, we get a hash value from the file
$return['hash'] = md5_file($_FILES['Filedata']['tmp_name']);
// ... and if available, we get image data
$info = @getimagesize($_FILES['Filedata']['tmp_name']);
// Specify directory path for your images directory
$upload_directory = $_SERVER[DOCUMENT_ROOT] ."/file_upload/uploads/$loggedinid/$pid/";
$fileLoc="file_upload/uploads/$loggedinid/$pid/";
// Check that the images directory exists
if(file_exists($upload_directory))
{
// Upload file or return error message information
$fileUrl = $fileLoc .$_FILES[Filedata][name];
mysql_query("INSERT INTO `homework` SET `uid`='$loggedin', `pid`='$pid', `url`='$fileUrl', `approved`='0'");
if(!move_uploaded_file($_FILES[Filedata][tmp_name], $upload_directory .$_FILES[Filedata][name]))
{
$error = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
}
}
else
{
mkdir("../uploads/$loggedinid/$pid", 0777);
// Upload file or return error message information
$fileUrl = $fileLoc .$_FILES[Filedata][name];
mysql_query("INSERT INTO `homework` SET `uid`='$loggedinid', `pid`='$pid', `url`='$fileUrl', `approved`='0'");
if(!move_uploaded_file($_FILES[Filedata][tmp_name], $upload_directory .$_FILES[Filedata][name]))
{
$error = "Could not upload file " .$_FILES["Filedata"]["name"] ."<br />" .$_FILES;
}
}
if ($info) {
$return['width'] = $info[0];
$return['height'] = $info[1];
$return['mime'] = $info['mime'];
}
}
// Output
/**
* Again, a demo case. We can switch here, for different showcases
* between different formats. You can also return plain data, like an URL
* or whatever you want.
*
* The Content-type headers are uncommented, since Flash doesn't care for them
* anyway. This way also the IFrame-based uploader sees the content.
*/
if (isset($_REQUEST['response']) && $_REQUEST['response'] == 'xml') {
// header('Content-type: text/xml');
// Really dirty, use DOM and CDATA section!
echo '<response>';
foreach ($return as $key => $value) {
echo "<$key><![CDATA[$value]]></$key>";
}
echo '</response>';
} else {
// header('Content-type: application/json');
echo json_encode($return);
}
?>