I am uploading multiple files and when upload is successful, I want for each file, echo Upload successful! with Filename
The problem is: when there are multiple files, the echo for each file overwrites the other one. So I can only see Upload successful! with Filename
from the last uploaded file! How can I make the echo's for each file that is being uploaded under each other in the same div (alert-success)?
This is my code:
///---///
else {
// file is ready to be uploaded
$tmpFilePath = $_FILES['file']['tmp_name'];
$newFilePath = $dir.'/' . $_FILES['file']['name'];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
echo '<br /><div class="alert alert-success"><b>Upload Successful!</b> File: '.$_FILES["file"]["name"].'</div><br />';
}
exit;
}
This is the html for uploading the files:
<!-- DROPAREA -->
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
<div id="drag_upload_file">
<p>DROP FILE(S) HERE</p>
<p>or</p>
<p><input class="browse btn btn-primary" type="button" value="Browse" onclick="file_explorer();"></p>
<input type="file" id="selectfile" name="upload" multiple>
</div>
</div>
<!-- END DROPAREA -->
You will have to do this with javascript. The script will interact with the page and sends the file(s) to a PHP script for processing. The output will return and can be displayed. It is to much code to show it here. but you will need the Filereader api in javascript. It is to much code but i will give you the main routine to get started.
// process file
kuva.doFile = function (thisFile) {
// output message
kuva.msg(thisFile.name + ' ' + kuvaoptions.msgLoading + '.' );
// make preview image and keep reference to this html block
var preview = kuva.makePreview(thisPath + kuvaoptions.loadingImg, thisFile.name);
// start the FileReder API
var reader = new FileReader();
// callback onprogress
reader.onprogress = function(evt) {
kuva.updateProgressBar(kuva.updateProgress(evt), preview);
};
// callback onloadstart
reader.onloadstart = function () {
// progress bar to 0.
kuva.updateProgressBar(0, preview);
};
// callback onloadend
reader.onloadend = function () {
// progress bar to 100.
kuva.updateProgressBar(100, preview);
};
reader.onerror = function (e) {
console.log('Reader error: ' + e);
};
// callback onload (ready loading)
reader.onload = function (readerEvent) {
// start the Image API
var image = new Image();
image.onload = function () {
var arr_dim = kuva.calcResize(image.width, image.height);
// size
kuva.msg( thisFile.name + ' ' + kuvaoptions.msgSizeIs + ': ' + image.width + ' x ' + image.height);
// already a resize
if(image.width !== arr_dim['width']) {
kuva.msg(thisFile.name + ' ' + kuvaoptions.msgResizeTo + ': ' + arr_dim['width'] + ' x ' + arr_dim['height']);
}
// resize with canvas
var dataURL = kuva.rezise2step(image, arr_dim, thisFile.type);
// show the picture and set widht: auto
preview.find('img.kuvaimg').attr({
'style': 'width:auto; height:' + kuvaoptions.previewHeight + 'px;',
'src': dataURL //this.result,
});
// send this image
$.event.trigger({
type: "sendFile",
blob: dataURLtoBlob(dataURL),
fileName: thisFile.name,
preview: preview
});
}; // end image onload
// result of reader to image starts image.onload
image.src = readerEvent.target.result;
}; // end reader onload
// set upload to reader so reader.onload start
reader.readAsDataURL(thisFile);
}; // end function
The complete code has image rezise, client side image preview, progressbars etc.
foreach ($file_ary as $file) {
print 'File Name: ' . $file['name'];
print 'File Type: ' . $file['type'];
print 'File Size: ' . $file['size'];
}
and if you are using Ajax, you can send result as json to the current div