I have been developing an upload site for a couple of months now, and the most requested feature on the site has been for a Multiple File Uploader, personally, I am more than happy to bring this feature in however I am looking for already-available scripts that will allow me to do this, as I have no idea how to code a purely php/html upload tool.
I came across SWFUpload, this seems like a decent script however I wanted to see if it could do the following:
-> Allow me to select what file extensions are allowed to be upload.
-> Allow me to set the maximum amount of files being uploaded.
-> Allow me to perform MySQL Queries post upload, as we log all uploads and assign them to accounts
I will need a lot of flexibility in such script, and SWFUpload does not seem to offer such flexibility to change the script into something I want, so I am asking if it would simply be easier to convert what currently is a single file uploader to a multi-file uploader.
Thank you for your time,
Jake
If you are happy to make somethnig for modern browsers only you can simply make your form look like:
<input name="files[]" type="file" multiple="multiple" />
And your browser will automatically do the rest for the front end.
If you already can upload files it wont take many changes to upload multiple files, just do what your doing now but in a loop. print_r($_FILES) will show you the structure.
If you want a fancy front end I recommend Uploadify, it works really well with jQuery.
I've used Maian Uploader before and it is extremely flexible. You can specify which file types to allow people to upload, a file size limit, select multiple files to upload, etc. Here's the link to the page http://www.maianscriptworld.co.uk/free-php-scripts/maian-uploader/free-file-upload-system/index.html.
The design is anything but pretty but you can customize it to your liking. You may want to check out the demo first http://www.maianscriptworld.com/demos/uploader/. You just login and go to the upload section on the left to check it out.
This script offers all what you need !
http://valums.com/ajax-upload/
You need to include these 4 files along with a folder named as "uploads" in which the images uploaded will be stored.
multiupload.php
<html>
<head>
<title>Upload Multiple Images Using jquery and PHP</title>
<!-------Including jQuery from Google ------>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
<!------- Including CSS File ------>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="maindiv">
<div id="formdiv">
<h2>Multiple Image Upload Form</h2>
<form enctype="multipart/form-data" action="upload.php" method="post">
First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
<div id="filediv"><input name="file[]" type="file" id="file"/></div>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>
<!------- Including PHP Script here ------>
<?php include "connect.php"; ?>
<?php include "upload.php"; ?>
</div>
</div>
</body>
</html>
upload.php
<?php include "connect.php"; ?>
<?php
if (isset($_POST['submit'])) {
$j = 0; // Variable for indexing uploaded image.
$target_path = "uploads/"; // Declaring Path for uploaded images.
for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
// Loop to get individual element from the array
$validextensions = array("jpeg", "jpg", "png","pdf","gif","doc","docx","txt","bmp"); // Extensions which are allowed.
$ext = explode('.', basename($_FILES['file']['name'][$i])); // Explode file name from dot(.)
$file_extension = end($ext); // Store extensions in the variable.
//$target_path = $target_path . md5(md5(uniqid())) . "." . $ext[count($ext) - 1]; // Set the target path with a new name of image.
$j = $j + 1; // Increment the number of uploaded images according to the files in array.
if (($_FILES["file"]["size"][$i] < 20000000) // Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], "uploads/".$_FILES['file']['name'][$i])) {
//if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { <!----For file uploading with actual name->
// If file moved to uploads folder.
echo $imagename=basename($_FILES['file']['name'][$i]);
echo $imagetmp="uploads/" . $imagename;
//Insert the image name and image content in image_table
$insert_image="INSERT INTO `image_table`(`image_name`, `image_content`) VALUES('$imagetmp','$imagename')";
mysql_query($insert_image);
echo $j. ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
} else { // If File Was Not Moved.
echo "not inserted in db";
echo $j. ').<span id="error">please try again!.</span><br/><br/>';
}
} else { // If File Size And File Type Was Incorrect.
echo $j. ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
}
}
}
?>
script.js
var abc = 0; // Declaring and defining global increment variable.
$(document).ready(function() {
// To add new input file field dynamically, on click of "Add More Files" button below function will be executed.
$('#add_more').click(function() {
$(this).before($("<div/>", {
id: 'filediv'
}).fadeIn('slow').append($("<input/>", {
name: 'file[]',
type: 'file',
id: 'file'
}), $("<br/><br/>")));
});
// Following function will executes on change event of file input to select different file.
$('body').on('change', '#file', function() {
if (this.files && this.files[0]) {
abc += 1; // Incrementing global variable by 1.
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd" + abc).append($("<img/>", {
id: 'img',
src: 'x.jpg',
alt: 'delete'
}).click(function() {
$(this).parent().parent().remove();
}));
}
});
// To Preview Image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name) {
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
style.css
#import "http://fonts.googleapis.com/css?family=Droid+Sans";
form{
background-color:#fff
}
#maindiv{
width:960px;
margin:10px auto;
padding:10px;
font-family:'Droid Sans',sans-serif
}
#formdiv{
width:500px;
float:left;
text-align:center
}
form{
padding:40px 20px;
box-shadow:0 0 10px;
border-radius:2px
}
h2{
margin-left:30px
}
.upload{
background-color:red;
border:1px solid red;
color:#fff;
border-radius:5px;
padding:10px;
text-shadow:1px 1px 0 green;
box-shadow:2px 2px 15px rgba(0,0,0,.75)
}
.upload:hover{
cursor:pointer;
background:#c20b0b;
border:1px solid #c20b0b;
box-shadow:0 0 5px rgba(0,0,0,.75)
}
#file{
color:green;
padding:5px;
border:1px dashed #123456;
background-color:#f9ffe5
}
#upload{
margin-left:45px
}
#noerror{
color:green;
text-align:left
}
#error{
color:red;
text-align:left
}
#img{
width:17px;
border:none;
height:17px;
margin-left:-20px;
margin-bottom:91px
}
.abcd{
text-align:center
}
.abcd img{
height:100px;
width:100px;
padding:5px;
border:1px solid #e8debd
}
b{
color:red
}
By using this code, you can upload multiple images and that images will be stored in the database too.For that purpose you need to create one table in database in which there are three fields id,image_name and image_content.
Related
I try to modify the php scrip to allow it to upload pdf instead of image. I've done several modification but none of them are working. I really appreciate if someone can show me how to modify this script to allow uploading the pdf.
I'm very new in php and need more guidance from php experts out there.
Thanks in advance for your kind assistance.
Anyway this is the code:
## Heading ##<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#uploader {
width: 300px;
height: 200px;
background: rgba(0,0,0,.075) url(../../img/pdf_icon.png) repeat fixed left;
border-radius:8px;
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.15);
display: block;
padding: 10px;
}
#uploader.highlight {
background:#ff0;
}
#uploader.disabled {
background:#aaa;
}
</style>
<script src="drag-drop-upload-pdf.js"></script>
</head>
<body>
<!-- DROP ZONE -->
<div id="uploader">
Muatnaik fail pdf di sini...
</div>
<!-- STATUS -->
<div id="upstat"></div>
<!-- FALLBACK -->
<form action="upload-pdf.php" method="post" enctype="multipart/form-data">
<br />
<input class="btn btn-primary" type="file" name="file-upload" id="file-upload" accept="pdf/*">
<br />
<br />
<input class="btn btn-primary" type="submit" value="Upload File" name="submit">
</form>
</body>
</html>
## PHP Script ##
<?php
// SOURCE + DESTINATION
$source = $_FILES["file-upload"]["tmp_name"];
$destination = __DIR__.'/../../download/'. $_FILES["file-upload"]["name"];
echo "Uploaded ";
$error = "";
// CHECK IF FILE ALREADY EXIST
if (file_exists($destination)) {
$error = $destination . " already exist.";
}
// ALLOWED FILE EXTENSIONS
if ($error == "") {
$allowed = ["application/pdf", "application/x-pdf", "application/acrobat", "applications/vnd.pdf",
"text/pdf". "text/x-pdf"];
$ext = strtolower(pathinfo($_FILES["file-upload"]["name"], PATHINFO_EXTENSION));
if (!in_array($ext, $allowed)) {
$error = "$ext file type not allowed. File must be uploaded in PDF format. - " . $_FILES["file-
upload"]["name"];
}
}
// LEGIT TEXT FILE CHECK
if ($error == "") {
if (getimagesize($_FILES["file-upload"]["tmp_name"]) == false) {
$error = $_FILES["file-upload"]["name"] . " is not a valid file.";
}
}
// FILE SIZE CHECK
if ($error == "") {
// 1,000,000 = 1MB
if ($_FILES["file-upload"]["size"] > 50000000) {
$error = $_FILES["file-upload"]["name"] . " - file size too big!";
}
}
// ALL CHECKS OK - MOVE FILE
if ($error == "") {
if (!move_uploaded_file($source, $destination)) {
$error = "Error moving $source to $destination";
}
}
// ERROR OCCURED OR OK?
if ($error == "") {
echo $_FILES["file-upload"]["name"] . " Upload DONE.";
} else {
echo $error;
}
?>
Try change this in HTML:
accept="application/pdf"
I'm currently developing a simple web page that enables the user to: upload an image and a corresponding caption to a DB, let the user view the images and delete them.
I have already accomplished the first two with the following code:
<?php
#include_once("connection.php");
$db = new mysqli("192.168.2.2", "root", "", "proyectoti");
if ($db->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo "Información de servidor: ";
echo $db->host_info . "\n";
// Initialize message variable
$msg = "";
// If upload button is clicked ...
if (isset($_POST['upload'])) {
// Get image name
$image = addslashes(file_get_contents($_FILES['image']['tmp_name'])); #$_FILES['image']['name'];
// Get text
$image_text = mysqli_real_escape_string($db, $_POST['image_text']);
$sql = "INSERT INTO images (image, image_text) VALUES ('{$image}', '{$image_text}')";
// execute query
mysqli_query($db, $sql);
}
$result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Proyecto TI | Sube imágenes</title>
<style type="text/css">
#content{
width: 50%;
margin: 20px auto;
border: 1px solid #cbcbcb;
}
form{
width: 50%;
margin: 20px auto;
}
form div{
margin-top: 5px;
}
#img_div{
width: 80%;
padding: 5px;
margin: 15px auto;
border: 1px solid #cbcbcb;
}
#img_div:after{
content: "";
display: block;
clear: both;
}
img{
float: left;
margin: 5px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<h1>Proyecto TI | <a> Interfaz </a></h1>
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
<form method="POST" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" name="image">
</div>
<div>
<textarea
id="text"
cols="40"
rows="4"
name="image_text"
placeholder="Di algo de esta imagen ^^"></textarea>
</div>
<div>
<button type="submit" name="upload">Publicar</button>
</div>
</form>
</div>
</body>
</html>
It looks like this:
Now, the only part I'm missing is being able to delete an image (basically I only echo each image), how would you suggest for me to accomplish this, to make each item clickable and let's say, pop up a dialog or button to perform an action (delete from DB).
I really don't know much about PHP or CSS/HTML, any help would be much appreciated, Thank you!
Within this loop:
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
Personally I would add an element to click on - like an 'x' or whatever - with a unique data attribute:
https://www.abeautifulsite.net/working-with-html5-data-attributes
You have to add the unique id of the image obviously, so you can let SQL know which row to delete... Like this:
echo "<div class='delete-image' data-id='" . $row['id'] . "'>x</div>';
Then I would link this class to an AJAX call to make an asynchronous request to the server and delete the image without reloading the page. It's not very hard.
An easier solution would be to create a new form in the loop, so you create multiple forms per image, add a hidden field with the image id in the form and make a submit button with the valeu 'delete' or simply 'x'.
The same way you created the check:
if (isset($_POST['upload'])) { ... }
You can create something like this:
if (isset($_POST['delete-image'])) { ... }
You will be carrying the image id value like a normal form input. And you can do whatever you want with it.
I would HIGHLY suggest you to look into how to work with jquery and ajax calls though.
Opening a dialogue and ask the user before he deletes an item will require that you either go another page for deletion or use javascript for this.
In both cases, you should somehow set an identifier for your image in your html-code.
I would suggest you give every image an id
'<img ... id="'.$yourImageId.'">'
or a data-attribute
'<img ... data-identifier="'.$yourImageId.'" >'
with that identifier.
First variant:
...
echo '<a href="/path/to/delete/view/page.php?image=yourImageId">'
echo '<img ... id="'.$yourImageId.'"/>'
echo '</a>'
...
and on this delete-view-page, you just have a form that triggers your delete-code
<form action="/path/to/delete/view/page.php" method="POST">
<input type="hidden" name="id" value="<?php echo $yourImageId ?>">
</form>
<!-- after this, react with $_POST['id'] --> to the id sent to the server side and delete the image in your database -->
The other way is not server side rendered.
You should give your Elements some class like "my-clickable-image".After that, you have a script on your page, that looks something like the following
<script>
/* get your images with querySelectorAll, the . stands for class and after that your name */
var clickables = document.querySelectorAll(".my-clickable-image");
clickables.foreach(function(image){
// say that for each image, when clicked the generated function is called image.addEventListener('click',generateShowDialogueFunc(image.getAttr("id")));
});
// generate a function(!) that reacts to an image being clicked
function generateShowDialogueFunc(imageIdentifier){
// return a function that adds a Pop Up to the page
// the Pop Up has approximately the code of the first options second page
// except that now, it must create and remove elements in javascript
return function createPopUp(){
removePopUp();
var popup = document.createElement("div");
popup.setAttribute("id","deletePopUp");
var deleteForm = document.createElement("form");
deleteForm.setAttr("action","/path/to/file/that/deletes/given/query.php?id="+imageIdentifier);
var deleteContents = '<p> Do you want to delete this image? </p>'
+ '<button type="submit"> yes </button>'
+ '<button onclick="removePopUp()"> no </button>'
deleteForm.innerHTML = deleteContents;
document.body.appendChild()
}
}
// remove the Pop Up that can be used to delete an image from the page
function removePopUp(){
var existingPopUp = document.getElementById("deletePopUp");
if(existingPopUp) document.body.removeChild(existingPopUp);
}
</script>
<!-- just add some styling to make the popup show on top of the page -->
<style>
#deletePopUp{
width: 50vw;
height: 50vh;
position: absolute;
z-index: 1;
padding: 1em;
}
</style>
In this case, you just call the server to delete the image, not to show the delete form.
I would suggest the second one but stack overflow is not made for opinion based answers.
Regarding simple security:
It looks like your users could give titles or texts to images.
try what happens if a user gives a title like <bold>some title</title>
and guess what would happen if the title is <script>window.location.href="google.com"</script>
(XSS * hint hint *)
Regarding code structure:
If you want to do something like web development more often, think about separating your database accessing code, and your logic code from your php page template code, this is called 3 tier architecture and standard for bigger projects but i guess this is really just a first, short prototype or test.
I built a file upload form in PHP, IT WORKS fine when it comes to images, but it will not upload an audio file.
I can upload all (most) other files, but can't upload mp4/mp3/wav
It registers as no file for some reason (it won't even echo out the file information like it does with images and other files) My code works just well for other types of files.
I have searched for a solution before posting this.
The code is below and you may try it.
Here is the code:
<?php
if (isset($_FILES['UploadFileField'])){
$UploadName = $_FILES['UploadFileField']['name'];
$UploadTmp = $_FILES['UploadFileField']['tmp_name'];
$UploadType = $_FILES['UploadFileField']['type'];
$FileSize = $_FILES['UploadFileField']['size'];
$UploadName = preg_replace("#[^a-z0-9.]#","",$UploadName);
echo $UploadName."</br>";
echo $UploadTmp."</br>";
echo $UploadType."</br>";
echo $FileSize."</br>";
if ($FileSize > 100000){
die("Error - File Too Big");
}
if(!$UploadTmp){
die("No File Selected, Please Upload Again");
}else{
move_uploaded_file($UploadTmp,"Uploads/$UploadName");
}
}
?>
<!Doctype HTML>
<html>
<head>
<style>
.fileuploadholder{
width:400px;
height:200px;
margin: 60px auto 0px auto;
background-color:#FFF;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<div class="fileuploadholder">
<label for="UploadFileField"></label>
<form action="FileUpload.php" method="post" enctype="multipart/form-data" name="FileUploadForm" id="FileUploadForm">
<input type="file" name="UploadFileField" id="UploadFileField"/>
<input type="submit" name="UploadButton" value="Upload"/>
</form>
</div>
</body>
</html>
I recently installed uploadifive on my site http://tradersprinting.com/contact/send-file-2/ , and am experiencing a 404 error every time that I attempt to upload a file.
The site is powered by the WordPress Content Management System, and the site is hosted on 1&1. The uploadify files are stored in the directory: "http://tradersprinting.com/wp-content/themes/traders/uploadify". The WordPress function "bloginfo('template_directory')" returns "http://tradersprinting.com/wp-content/themes/traders/". Everything is currently at "factory settings" without any adjustments, save the snippet of code I am attaching below:
Code on the Page http://tradersprinting.com/contact/send-file-2/
<?php
chmod("wp-content/themes/traders/uploads/",0777);
chmod("wp-content/themes/traders/uploadify/uploads/",0777);
?>
<script src="<?php bloginfo('template_directory'); ?>/uploadify/jquery.min.js" type="text/javascript">
</script>
<script src="<?php bloginfo('template_directory'); ?>/uploadify/jquery.uploadifive.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/uploadify/uploadifive.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {
float: left;
margin-right: 10px;
}
#queue {
border: 1px solid #E5E5E5;
height: 177px;
overflow: auto;
margin-bottom: 10px;
padding: 0 3px 3px;
width: 300px;
}
</style>
<form>
<div id="queue">
</div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
My copy of uploadifive.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Set the uplaod directory
$uploadDir = '/uploads/';
// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // Allowed file extensions
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
// Commenting out this line as a potential bugfix for 404 error
//$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
$uploadDir = "/wp-content/themes/traders/uploadify/uploads";
$targetFile = $uploadDir . $_FILES['Filedata']['name'];
// Validate the filetype
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
// Save the file
move_uploaded_file($tempFile, $targetFile);
echo 1;
} else {
// The file type wasn't allowed
echo 'Invalid file type.';
}
}
?>
I have created an "uploads" directory in every branch of the directory tree starting from the root, and including one at every step of the way down to the sample uploadify directory, but none of them receive files.
I love the program, and I think the designer has done a stellar job, but I would really like for the product to work, especially after investing! Please help!
Uploadify uses a Flash SWF based uploader. In many cases Apache web server's mod_security module prevents data uploaded by any SWF. So I'd say check server's mod_security log (not Apache error log) if it is blocking your script.
How should I retrieve the uploaded file details from uploadify after the completion of the upload process.
I want to do a process in the uploaded file.
But when I use the uploadify it simply uploads the file to a location through the uploadify.php which I customized.
I want this uploadify process to redirect to a page after completed with the details of the file such as filename and the targeted location where I will proceed with my second operation on the file uploaded
Updates
This is what my code as of now
<style type="text/css">
body {
font: 0.8em/1.6em Arial, Helvetica, sans-serif;
}
fieldset {
width: 500px;
}
#sample {
display:table;
}
#sampleFile {
float: left;
display:table-cell;
margin-right: 15px;
}
#download {
margin-top: 15px;
display: table;
}
.dlImage {
display: table-cell;
float: left;
margin-right: 10px;
}
.dlText {
float: left;
display: table-cell;
}
.fileDetails {
color: red;
}
.releaseDate{
margin-top: -3px;
color: gray;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uploadify scriptData Sample</title>
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'uploadify/upload.php',
'folder': 'files',
'multi': false,
'displayData': 'speed',
'onComplete' : function(event, queueID, fileObj, reponse, data) {
location.href="complete.php";
}
});
});
</script>
</head>
<body>
<div id="sample">
<div id="sampleFile">
<fieldset style="border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0">
<legend><strong>Sélectionner l'image à imprimer :</strong></legend>
<div id="fileUpload">You have a problem with your javascript</div>
Start Upload <p></p>
</fieldset>
</div>
</body>
</html>
on the second page I do want to echo the file name that is uploaded
I have there in the second page complete.php
<?php
print_r($_FILES);
echo $_FILES['type'];
echo $_FILES['tmp_name'];
echo $_FILES['name'];
echo $_FILES['size'];
?>
Do you know that you can get the filename, filpath inside the onComplete event like this:-
onComplete: function(event, queueID, fileObj, reponse, data)
{
alert fileObj.name; //The name of the uploaded file
alert fileObj.filePath; //The path on the server to the uploaded file
location.href= "complete.php?filename="+fileObj.name+"&filepath="+fileObj.filePath; //Here you can do a javascript redirect
}
Check the documentation for further details http://www.uploadify.com/documentation/events/oncomplete-2/
Are you looking for those values? If not let me know
Updates
As per your question updates, you have 2 options.
Either to do the "some process" after the file upload in the uploadify.php. You can see the file uploadify.php which comes with the uploadify plugin. There you have the $_FILES['Filedata'] array containing all the file info. You may do the post processing here itself (by calling a function better instead of writing lots of code in uploadify's core code)
in uploadify.php
$_FILES['Filedata']['name'] //file name
Or like I said, get the file name and path inside the onComplete event. Then pass these params like this :-
location.href= "complete.php?filename="+fileObj.name+"&filepath="+fileObj.filePath;
I think this is better. You may send an ajax request instead to do the entire process (file upload + your "some process") without loading the page again.
Write a $.post() request inside the onComplete event with those parameters and post to "complete.php"
Getting parameters inside onComplete which are not available by default
You have to use the response parameter available inside onComplete
I worked on uploadify version 2.1.0 so my solution will work for sure on that version.
If you want only one parameter, you can echo that at the end of uploadify.php
I did the following thing:-
In my uploadify.php changed (this was in the original uploadify.php):-
move_uploaded_file($tempFile,$targetFile);
echo "1";
to this:-
move_uploaded_file($tempFile,$targetFile);
echo $tempFile;
and then inside the onComplete event did an explode -
var tmpName = reponse;
If however, you want to get more than one parameter inside onComplete, this is a trick I can give (this is not a good approach, but I was not able to return multiple params by any other way - I tried returning json array etc.):-
move_uploaded_file($tempFile,$targetFile);
echo $param1.'%%__%%'.$param2;
and then inside the onComplete event did an explode -
var paramsArray = explode('%%__%%',reponse);
param1 = paramsArray[0];
param2 = paramsArray[1];
you can get all the details of the uploaded file by echoing below line;
print_r($_FIELS);
OR you can echo all the fields of uploded files.
echo $_FIELS['type'];
echo $_FIELS['tmp_name'];
echo $_FIELS['name'];
echo $_FIELS['size'];
i m right if i understood you what you want to saying. but please do comment if you searching for anything else.
Thanks.