Narendra Verma Narendra Verma - 3 years ago 78
PHP Question

Image size showing Zero byte after uploading on server using php

I am using croppie plugin for crop the image which is working perfectly. The image was stored in my folder and the image size is showing zero bytes.It is working perfectly on localhost but not working on the server. Would you help me in this?

<form action="process.php" id="form" method="post">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<input type="submit" name="submit" value="save" class="upload-result">
</form>
if(isset($_POST['submit'])){
$data = $_POST['imagebase64'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents('images/profile/'.$imageName, $data);
// echo $imageName;
}

Answer Source

This is working file. This may help you.

<?php
if(isset($_POST['imagebase64'])){
    $data = $_POST['imagebase64'];

    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    file_put_contents('image64.png', $data);
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="croppie.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var $uploadCrop;

function readFile(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();          
        reader.onload = function (e) {
            $uploadCrop.croppie('bind', {
                url: e.target.result
            });
            $('.upload-demo').addClass('ready');
        }           
        reader.readAsDataURL(input.files[0]);
    }
}

$uploadCrop = $('#upload-demo').croppie({
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});

$('#upload').on('change', function () { readFile(this); });
$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'original'
    }).then(function (resp) {
        $('#imagebase64').val(resp);
        $('#form').submit();
    });
});

});
</script>
</head>
<body>
<form action="process.php" id="form" method="post">
<input type="file" id="upload" value="Choose a file">
<div id="upload-demo"></div>
<input type="hidden" id="imagebase64" name="imagebase64">
<a href="#" class="upload-result">Send</a>
</form>
</body>
</html>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download