so I searched the internet for a multi-upload possibility, which shows a progress bar while uploading. As there are many out there, I quickly found one which suited my needs.
Now I am encountering a problem after the upload has finished. As soon as the upload is finished, it should show me the status of the upload "File [number]: Filename (size) has been uploaded" in a DIV. However it does not only show me the status but it includes my website layout again as a duplicate.
Please could somebody help me with this as I was sitting on it a whole day and could not find the error :(
This is the HTML+Form:
<div id="main">
<form id="pupload" action="upload.php" method="POST" enctype="multipart/form-data">
<fieldset class="tabulated">
<table id="down" class="bbcode_table" cellspacing="1">
<thead>
<tr class="Cnorm">
<td><input type="file" name="files[]" multiple="multiple" id="files"></td>
</tr>
</thead>
<tbody>
<tr class="Cmite">
<td><input id="submit" class="button1" type="submit" value="Upload"></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
{msg}
<div id="status"></div>
<script>
jQuery(document).ready(function ($) {
"use strict";
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success: function(data, statusText, xhr) {
var percentVal = '100%';
bar.width(percentVal);
percent.html(percentVal);
status.html(xhr.responseText);
},
error: function(xhr, statusText, err) {
status.html(err || statusText);
}
});
});
</script>
</div>
The required jQuery files are being called in the websites header.
This is the PHP Code to it:
<?php
defined ('main') or die ( 'no direct access' );
$main_dir = 'include/downs/public-upload/';
// Upload dirs sorted by file types
$files = $main_dir.'files/';
$images = $main_dir.'images/';
$media = $main_dir.'media/';
$video = $main_dir.'video/';
// File extensions
$files_ext = array('apk','exe','doc','docx','docm','gadget','html','ini','pdf','php','rar','sh','txt','xlsx','zip');
$images_ext = array('gif','jpg','JPG','jpe','jpeg','JPEG','png','PNG');
$media_ext = array('mp3','ogg','wav');
$video_ext = array('avi','mp4','3gp');
$msg = '';
// Check rights first to make sure we can put the file in the directory
if (!is_writeable ($main_dir)) {
$msg = 'The folder "include/downs/<b>public-upload</b>/" requires WRITE ( chmod 777 ) permission!!! Please set the WRITE ( chmod 777 ) permission and reload the page.';
}
// Now we can upload our file
$tpl = new tpl ( 'admin/pupload/pupload_upload' );
if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
{
// loop all files
foreach ( $_FILES['files']['name'] as $i => $name )
{
$pathinfo = pathinfo($name);
// if file not uploaded then skip it
if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
continue;
// now we can move the uploaded files
// IMAGES
if (in_array($pathinfo['extension'], $images_ext)) {
if ( move_uploaded_file($_FILES['files']['tmp_name'][$i], $images . $name) )
{
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#00FF00">successfully uploaded</font><br />';
} else {
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#FF0000">not successfully uploaded</font><br />';
}
// FILES
} else if (in_array($pathinfo['extension'], $files_ext)) {
if ( move_uploaded_file($_FILES['files']['tmp_name'][$i], $files . $name) )
{
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#00FF00">successfully uploaded</font><br />';
} else {
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#FF0000">not successfully uploaded</font><br />';
}
// VIDEOS
} else if (in_array($pathinfo['extension'], $video_ext)) {
if ( move_uploaded_file($_FILES['files']['tmp_name'][$i], $video . $name) )
{
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#00FF00">successfully uploaded</font><br />';
} else {
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#FF0000">not successfully uploaded</font><br />';
}
// MEDIA
} else if (in_array($pathinfo['extension'], $media_ext)) {
if ( move_uploaded_file($_FILES['files']['tmp_name'][$i], $media . $name) )
{
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#00FF00">successfully uploaded</font><br />';
} else {
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#FF0000">not successfully uploaded</font><br />';
}
} else {
$msg .= '<b>File ' .($i+1). ':</b> ' . $name . ' (' . niceBytes($_FILES['files']['size'][$i]) . ' ) <font color="#FF0000">has an unsupported ending</font><br />';
}
}
}
$tpl->set_ar_out(array('msg' => $msg), 0);
?>
The upload is working as the files are being put in their folders and also comes up with the message "Upload successful" but it includes my website layout again as if I would have an "include()" function running.
I am greatful for any help I could get on this.
The solutions for this issue could be 2:
1- Modify the target page (upload.php) to only print the data that you need.
2- In your ajax function filter "xhr.responseText" to display just the data that you want
I would decide myself for the 1st option doing an echo of variable msg in upload.php. Then on the success ajax you could try "status.html(data)" if "status.html(xhr.responseText)" still retrieves the whole page.