Menu
i am using this code for uploading multiple files .here, upload and select button become disabled when uploading is in progress but this works only on client side user can easily modify the code and remove its disable property so how can i do this on server side so the user will not be able to submit the form many times by clicking upload button after disabling it. Thanku for any help!
index.php
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload using Ajax</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<form action="action.php" method="post" enctype="multipart/form- data" id="multiple-upload-form">
<input type="button" id="select-file-btn" value="Select Files" onclick="document.getElementById('files').click(); return false;" />
<input type="submit" id="file-upload-btn" name="file_upload_btn" value="Upload">
<input type="file" id="files" name="files[]" multiple="" style="visibility: hidden;">
<br><br>
<div class="file-bar">
<span class="file-bar-fill" id="file-bar-fill-id"><span class="file-bar-fill-text" id="file-bar-fill-text-id"></span></span>
</div>
<script type="text/javascript">
var app = app || {};
(function(o){
"use strict";
var ajax, getFormData, setProgress;
ajax = function(data){
var xmlhttp = new XMLHttpRequest(), uploaded;
xmlhttp.addEventListener('readystatechange', function(){
if(this.readyState==4){
if(this.status==200){
uploaded = JSON.parse(this.response);
if(typeof o.options.finished==='function'){
o.options.finished(uploaded);
}
} else {
if(typeof o.options.error === 'function'){
o.options.error();
}
}
}
});
xmlhttp.upload.addEventListener("progress", function(event){
var percent;
if(event.lengthComputable===true){
percent = Math.round((event.loaded / event.total) * 100);
setProgress(percent);
}
});
if(o.options.progressBar!==undefined){
o.options.progressBar.style.width=0;
}
if(o.options.progressText!==undefined){
o.options.progressText.innerText=0;
}
xmlhttp.open("post", o.options.processor);
xmlhttp.send(data);
};
getFormData = function(source){
var data = new FormData(), i;
if(source.length<=0)
{
return false;
}
else
{
for(i=0;i<source.length; i++){
data.append('files[]', source[i]);
}
return data;
}
};
setProgress = function(value){
if(o.options.progressBar!==undefined){
o.options.progressBar.style.width = value? value+"%":0;
}
if(o.options.progressText!==undefined){
o.options.progressText.innerText=value?value+"%":0;
}
};
o.uploader = function(options){
o.options = options;
if(o.options.files !== undefined){
var imageFormDataValue = getFormData(o.options.files.files);
if(imageFormDataValue===false)
{
alert("No Files Selected");
document.getElementById("file-upload-btn").disabled = false;
document.getElementById("select-file-btn").disabled = false;
}
else
{
ajax(imageFormDataValue);
}
}
};
}(app));
document.getElementById("file-upload-btn").addEventListener("click", function(e){
e.preventDefault();
document.getElementById("file-upload-btn").setAttribute("disabled", "true");
document.getElementById("select-file-btn").setAttribute("disabled", "true");
var f = document.getElementById('files'),
pb = document.getElementById('file-bar-fill-id'),
pt = document.getElementById('file-bar-fill-text-id');
app.uploader({
files: f,
progressBar: pb,
progressText: pt,
processor: "action.php",
finished: function(data){
document.getElementById("file-upload-btn").disabled = false;
document.getElementById("select-file-btn").disabled = false;
if(data.status===true){
alert(data.data);
}
},
error: function(){
alert("Error occured. Try Again after page reload.");
}
});
});
</script>
</form>
</div>
</body>
</html>
action.php
<?php
set_time_limit(0);
if(count($_FILES["files"])>0)
{
$success = 0;
$failed = 0;
foreach ($_FILES["files"]["error"] as $key => $value)
{
if(empty($value))
{
if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], __DIR__."/uploads/".uniqid()."_".$_FILES["files"]["name"][$key]))
{
$success++;
}
else
{
$failed++;
}
}
else
{
$failed++;
}
}
$data = "";
if($success>0)
$data .= $success." files uploaded. ";
if($failed>0)
$data .= $failed." files failed to upload";
$response = array("status" => true, "data" => $data );
echo json_encode($response);
}
?>
522
As I've said in comment - no real cure to stop redundant uploads at server side as long as user has full access to html. The only thing that you can do - is to monitor total uploaded MB/day and to blacklist user ip/account who does such illegal activity. For example:
session_start();
$_SESSION['total_uploaded'] += (int)(filesize(($_FILES['fileToUpload']['tmp_name']))/(1024*1024));
if ($_SESSION['total_uploaded'] > 1024) {
echo "<p style='background-color: palevioletred; max-width:280px;'>
You uploaded too much data : {$_SESSION['total_uploaded']} MB<br>
So your IP/account will be blacklisted !</p>";
}
$html = <<< STR
<table border="1">
<tr>
<td>
<form id="uploadForm" action="" method="post" enctype= "multipart/form-data">
<br>
 <input type="file" name="fileToUpload" value=""><br><br>
 <input type="submit" name="submit_file" value="Upload">
</form>
</td>
</tr>
</table>
STR;
echo $html;
After some threshold of bombing server with uploads user will see:
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
