Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/thietkeweb2/vendor/verot/class.upload.php/test/ |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>class.upload.php test forms</title>
<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<style>
#examples{
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:stretch;
}
fieldset {
box-sizing: border-box;
margin-bottom: 20px;
padding: 15px;
width: 48%;
}
p.result {
margin: 0px;
padding: 0px;
}
legend {
font-weight: bold;
}
.button {
text-align: right;
}
.button input {
font-weight: bold;
}
pre {
white-space: pre-wrap;
}
#dnd_drag {
display: none;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #888;
border-radius: 7px;
cursor: default;
}
#dnd_drag.hover {
border: 2px dashed #000;
}
#xhr_progress, #dnd_progress {
background-color: #999;
padding: .1em 0;
width: 0%;
}
#xhr_status, #dnd_status {
font-size: 90%;
font-style: italic;
}
</style>
</head>
<body>
<h1>class.upload.php test forms</h1>
<div id="examples">
<fieldset>
<legend>Simple upload</legend>
<p>Pick up a file to upload, and press "upload" </p>
<form name="form1" enctype="multipart/form-data" method="post" action="upload.php" />
<p><input type="file" size="32" name="my_field" value="" /></p>
<p class="button"><input type="hidden" name="action" value="simple" />
<input type="submit" name="Submit" value="upload" /></p>
</form>
</fieldset>
<fieldset>
<legend>Image upload</legend>
<p>Pick up an image to upload, and press "upload" </p>
<form name="form2" enctype="multipart/form-data" method="post" action="upload.php" />
<p><input type="file" size="32" name="my_field" value="" /></p>
<p class="button"><input type="hidden" name="action" value="image" />
<input type="submit" name="Submit" value="upload" /></p>
</form>
</fieldset>
<fieldset>
<legend>XMLHttpRequest upload</legend>
<p>Pick up one file to upload, and press "upload" </p>
<form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
<p><input type="file" size="32" name="my_field" value="" id="xhr_field" /></p>
<div id="xhr_status"></div>
<p class="button"><input type="hidden" name="action" value="xhr" />
<input type="submit" name="Submit" value="upload" id="xhr_upload"/></p>
<div id="xhr_progress"></div>
</form>
<div id="xhr_result"></div>
</fieldset>
<fieldset>
<legend>HTML5 File Drag & Drop API</legend>
<p>Drag and drop one file to upload, and press "upload" </p>
<form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
<p><input type="file" size="32" name="my_field" value="" id="dnd_field" /></p>
<div id="dnd_drag">... drag and drop here ...</div>
<div id="dnd_status"></div>
<p class="button"><input type="hidden" name="action" value="xhr" />
<input type="submit" name="Submit" value="upload" id="dnd_upload"/></p>
<div id="dnd_progress"></div>
</form>
<div id="dnd_result"></div>
</fieldset>
<fieldset>
<legend>Multiple upload</legend>
<p>Pick up some files to upload, and press "upload" </p>
<form name="form3" enctype="multipart/form-data" method="post" action="upload.php">
<p><input type="file" name="my_field[]" value="" /></p>
<p><input type="file" name="my_field[]" value="" /></p>
<p><input type="file" name="my_field[]" value="" /></p>
<p class="button"><input type="hidden" name="action" value="multiple" />
<input type="submit" name="Submit" value="upload" /></p>
</form>
</fieldset>
<fieldset>
<legend>Multiple upload flexible</legend>
<p>Pick up some files to upload, and press "upload" </p>
<form name="form4" enctype="multipart/form-data" method="post" action="upload.php">
<p><input type="file" name="my_field[]" value="" multiple="multiple"/></p>
<p class="button"><input type="hidden" name="action" value="multiple" />
<input type="submit" name="Submit" value="upload" /></p>
</form>
<p>Note: Number of processed files per request on the server is also limited by PHP ini setting <strong>max_file_uploads</strong>.</p>
</fieldset>
<fieldset>
<legend>Image local manipulation</legend>
<p>Enter a local file name (absolute or relative) for a small image, and press "process" </p>
<form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
<p><input type="text" size="32" name="my_field" value="test.png" /></p>
<p class="button"><input type="hidden" name="action" value="local" />
<input type="submit" name="Submit" value="process" /></p>
</form>
</fieldset>
<fieldset>
<legend>Base64-encoded image data</legend>
<p>Copy here base64-encoded file data, and press "process" </p>
<form name="form6" enctype="multipart/form-data" method="post" action="upload.php" />
<p><textarea cols="32" name="my_field">base64:iVBORw0KGgoAAAANSUhEUgAAACUAAAARCAYAAABadWW4AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4AoBFik0VcV6egAAALpJREFUSMftlk0KwyAUhMfSTRDP4ybkFgGPqSRHUvAW001TWpqnFgykkIG3iT/fqGNQkSROphtOqJcppdRHGWMwTRPWdf0atPWRJLU3M/gUALFCCHzX9l2S1N7KgDRRjJHzPBMArbVdTdUYKE2UcyYADsNwiCmJUQx6KTe9tMuQVpFSonOueHy1qu2UxGgKuve+q6kaQzSlteY4jlyWpTkzv94+iXHfOc7Dc1RjnPuPfpn6R1Pqero06gEPaFNPl21bvgAAAABJRU5ErkJggg==</textarea></p>
<p class="button"><input type="hidden" name="action" value="base64" />
<input type="submit" name="Submit" value="process" /></p>
</form>
</fieldset>
</div>
<script type="text/javascript">
window.onload = function () {
function xhr_send(file, status, progress) {
if (file) {
xhr.addEventListener('readystatechange', function(event) {
if(xhr.readyState == 4){
document.getElementById(status).innerHTML = xhr.responseText;
}
}, false);
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
self.progress = event.loaded / event.total;
} else if (this.explicitTotal) {
self.progress = Math.min(1, event.loaded / self.explicitTotal);
} else {
self.progress = 0;
}
document.getElementById(progress).innerHTML = ' ' + Math.floor(self.progress*1000)/10 + '%';
document.getElementById(progress).style.width= self.progress*100 + '%';
}, false);
xhr.open("POST", "upload.php?action=xhr");
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.name));
xhr.send(file);
}
}
function xhr_parse(file, status) {
if (file) {
document.getElementById(status).innerHTML = "File selected : " + file.name + "(" + file.type + ", " + file.size + ")";
} else {
document.getElementById(status).innerHTML = "No file selected!";
}
}
function dnd_hover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
var xhr = new XMLHttpRequest();
if (xhr && window.File && window.FileList) {
// xhr example
var xhr_file = null;
document.getElementById("xhr_field").onchange = function () {
xhr_file = this.files[0];
xhr_parse(xhr_file, "xhr_status");
}
document.getElementById("xhr_upload").onclick = function (e) {
e.preventDefault();
xhr_send(xhr_file, "xhr_result", "xhr_progress");
}
// drag and drop example
var dnd_file = null;
document.getElementById("dnd_drag").style.display = "block";
document.getElementById("dnd_field").style.display = "none";
document.getElementById("dnd_drag").ondragover = function (e) {
dnd_hover(e);
}
document.getElementById("dnd_drag").ondragleave = function (e) {
dnd_hover(e);
}
document.getElementById("dnd_drag").ondrop = function (e) {
dnd_hover(e);
var files = e.target.files || e.dataTransfer.files;
dnd_file = files[0];
xhr_parse(dnd_file, "dnd_status");
}
document.getElementById("dnd_field").onchange = function (e) {
dnd_file = this.files[0];
xhr_parse(dnd_file, "dnd_status");
}
document.getElementById("dnd_upload").onclick = function (e) {
e.preventDefault();
xhr_send(dnd_file, "dnd_result", "dnd_progress");
}
}
}
</script>
</body>
</html>