Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script>
- function uploadphoto()
- {
- if (window.File && window.FileReader && window.FileList && window.Blob)
- {
- var files = document.getElementById('filesToUpload').files;
- for(var i = 0; i < files.length; i++)
- {
- resizeAndUpload(files[i]);
- }
- }
- else
- {
- alert('The File APIs are not fully supported in this browser.');
- }
- }
- function resizeAndUpload(file)
- {
- var reader = new FileReader();
- reader.onloadend = function()
- {
- var tempImg = new Image();
- tempImg.src = reader.result;
- tempImg.onload = function()
- {
- var MAX_WIDTH = 695;
- var MAX_HEIGHT = 470;
- var tempW = tempImg.width;
- var tempH = tempImg.height;
- if (tempW > tempH)
- {
- if (tempW > MAX_WIDTH)
- {
- tempH *= MAX_WIDTH / tempW;
- tempW = MAX_WIDTH;
- }
- }
- else
- {
- if (tempH > MAX_HEIGHT)
- {
- tempW *= MAX_HEIGHT / tempH;
- tempH = MAX_HEIGHT;
- }
- }
- var canvas = document.createElement('canvas');
- canvas.width = tempW;
- canvas.height = tempH;
- var ctx = canvas.getContext("2d");
- ctx.drawImage(this, 0, 0, tempW, tempH);
- var dataURL = canvas.toDataURL("image/jpeg");
- var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function(ev)
- {
- document.getElementById('filesInfo').innerHTML = 'Done!';
- };
- xhr.open('POST', 'upload-resized-photo.php', true);
- xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- var data = 'image=' + dataURL;
- xhr.send(data);
- }
- }
- reader.readAsDataURL(file);
- }
- </script>
- <form enctype="multipart/form-data" method="post" onsubmit="uploadphoto()">
- <div class="row">
- <label for="fileToUpload">Select Files to Upload</label><br />
- <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
- <output id="filesInfo"></output>
- </div>
- <div class="row">
- <input type="submit" value="Upload" />
- </div>
- </form>
- <?php
- if ($_POST)
- {
- define('UPLOAD_DIR', 'uploads/');
- $img = $_POST['image'];
- $img = str_replace('data:image/jpeg;base64,', '', $img);
- $img = str_replace(' ', '+', $img);
- $data = base64_decode($img);
- $file = UPLOAD_DIR . uniqid() . '.jpg';
- $success = file_put_contents($file, $data);
- // I did have the mysql insert here but it didnt even execute. Think it is due to xhr.open post method.
- }
- ?>
- if ($_POST)
- {
- define('UPLOAD_DIR', 'uploads/');
- $img = $_POST['image'];
- $img = str_replace('data:image/jpeg;base64,', '', $img);
- $img = str_replace(' ', '+', $img);
- $data = base64_decode($img);
- $file = UPLOAD_DIR . uniqid() . '.jpg';
- $success = file_put_contents($file, $data);
- $servername = "localhost";
- $username = "root";
- $password = "";
- $dbname = "test";
- // Create connection
- $conn = new mysqli($servername, $username, $password, $dbname);
- // Check connection
- if ($conn->connect_error) {
- die("Connection failed: " . $conn->connect_error);
- }
- $sql = "INSERT INTO images (image_name)
- VALUES ('{$file}')";
- if ($conn->query($sql) === TRUE) {
- echo "New record created successfully";
- } else {
- echo "Error: " . $sql . "<br>" . $conn->error;
- }
- $conn->close();
- }
- var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
- function Validate(oForm) {
- var arrInputs = oForm.getElementsByTagName("input");
- for (var i = 0; i < arrInputs.length; i++) {
- var oInput = arrInputs[i];
- if (oInput.type == "file") {
- var sFileName = oInput.value;
- if (sFileName.length > 0) {
- var blnValid = false;
- for (var j = 0; j < _validFileExtensions.length; j++) {
- var sCurExtension = _validFileExtensions[j];
- if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
- blnValid = true;
- break;
- }
- }
- if (!blnValid) {
- alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
- return false;
- }
- }
- }
- }
- return true;
- }
- function uploadphoto(oForm)
- {
- if(!Validate(oForm)){
- return false;
- }
- if (window.File && window.FileReader && window.FileList && window.Blob)
- {
- var files = document.getElementById('filesToUpload').files;
- for(var i = 0; i < files.length; i++)
- {
- resizeAndUpload(files[i]);
- }
- }
- else
- {
- alert('The File APIs are not fully supported in this browser.');
- }
- return false;
- }
- <form enctype="multipart/form-data" method="post" onsubmit="return uploadphoto(this)">
Add Comment
Please, Sign In to add comment