In my situation, I have images upload form with resize method. For small images about xxKB is OK but not for xxxKB. I have below code but does not know why where is the problem. Do you have any ideas? I am using PHP of codeingiter. Below is the error that shown. I have hosted the web site on goDaddy.
Request Entity Too Large The requested resource /index.php/newPost/createNewPost/2/Raymond Chiu/ does not allow request data with GET requests, or the amount of data provided in the request exceeds the capacity limit. Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.
Code:
//----font end php html code with javascript------------//
<input id="image1" name="image1" class="file" type="file" accept="image/*">
<button type="submit" class="btn btn-primary btn-tw" onclick="setup(); return false;">Submit</button>
<script>
$("#image1").fileinput({
'showPreview' : true,
'allowedFileExtensions' : ['jpg', 'png','gif'],
'showUpload' : false,
'maxFileCount':1,
'maxFileSize': 800000,
});
$('#image1').on('fileclear', function(event) {
img1 = null;
});
$('#image1').on('fileloaded', function(event, file, previewId, index, reader) {
img1 = file;
$("#uploadImgError").html('');
});
function getResizeImage(pic, callback)
{
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
// Create an image
//-----------------------------Image-------------------------
var img = document.createElement("img");
img.src = e.target.result;
var canvas = document.createElement("canvas");
//var canvas = $("<canvas>", {"id":"testing"})[0];
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 800;
var MAX_HEIGHT = 800;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
//document.getElementById('image').src = dataurl;
callback(dataurl);
}
reader.readAsDataURL(pic);
}
function isEmptyUploadFile(callback)
{
if(img1 == null && img2 == null && img3 == null && img4 == null && img5 == null)
callback(true);
else
callback(false);
}
function setForm(callback)
{
setImg1(function(data1)
{
if(data1 == true)
{
$('.progress-bar').css('width', 100+'%').attr('aria-valuenow', 100);
callback(true);
}
});
}
function setImg1(callback)
{
if(img1 != null)
{
getResizeImage(img1,function(tempPic)
{
document.getElementById('img1').value = tempPic;
getResizeThumbnailImage(img1,function(tempTPic)
{
document.getElementById('timg1').value = tempTPic;
$('.progress-bar').css('width', 20+'%').attr('aria-valuenow', 20);
callback(true);
});
});
}else{
$('.progress-bar').css('width', 20+'%').attr('aria-valuenow', 20);
callback(true);
}
}
function setup()
{
var myform = document.getElementById("newPost");
//console.log(myform.checkValidity());
if(!myform.checkValidity())
{
document.getElementById("validate").click();
return false;
}
isEmptyUploadFile(function(r)
{
var up1 = document.getElementById('image1').value;
var up2 = document.getElementById('image2').value;
var up3 = document.getElementById('image3').value;
var up4 = document.getElementById('image4').value;
var up5 = document.getElementById('image5').value;
if(r == true || (up1 == "" && up2 == "" && up3 == "" && up4 == "" && up5 == "") )
{
$("#uploadImgError").html('<em><span style="color:red"> <i class="icon-cancel-1 fa"></i> Please Upload at least one image!</span></em>');
//var loc = document.getElementById('uploadImgError'); //Getting Y of target element
//window.scrollTo(0, loc);
location.href = "#uploadImgError"; //Go to the target element.
return false;
}
else if(r == false)
{
$('#pleaseWaitDialog').modal('show');
setForm(function(data)
{
console.log(data);
if(data == true)
{
document.getElementById("newPost").submit();
}
return data;
});
}
});
}
</script>
// ------- controller ---------------------------//
$image1 = $this->input->post('img1');
$timage1 = $this->input->post('timg1');
$imgPath = '';
$timgPath = '';
$date=date_create();
if (isset($image1)) {
$currentTimeStamp = date_timestamp_get($date);
$imgPath = $upload_dir . '/['.$currentTimeStamp.']['.$userName.'].png';
$result = $this->uploadImg($image1, false, $imgPath);
}
if (isset($timage1)) {
$currentTimeStamp = date_timestamp_get($date);
$timgPath = $upload_dir . '/[T]['.$currentTimeStamp.']['.$userName.'].png';
$result = $this->uploadImg($timage1, true, $timgPath);
}
function uploadImg($input, $isThumbnail, $file)
{
if($input == null || $input == "")
{
return false;
}
$stringVal = $input;
$value = str_replace('data:image/png;base64,', '', $stringVal);
if ($this->check_base64_image($value) == false) {
return false;
}
$actualFile = base64_decode($value);
$img = imagecreatefromstring($actualFile);
$imgSize = getimagesize('data://application/octet-stream;base64,'.base64_encode($actualFile));
if ($img == false) {
return false;
}else
{
/*** maximum filesize allowed in bytes ***/
$max_file_length = 100000;
$maxFilesAllowed = 10;
log_message('debug', 'PRE UPLOADING!!!!!!!!');
if (isset($img)){
log_message('debug', 'UPLOADING!!!!!!!!');
// check the file is less than the maximum file size
if($imgSize['0'] > $max_file_length || $imgSize['1'] > $max_file_length)
{
log_message('debug', 'size!!!!!!!!'.print_r($imgSize));
$messages = "File size exceeds $max_file_size limit";
return false;
}else if (file_exists($file)) {
return false;
}else
{
return true;
}
}
function check_base64_image($base64) {
$img = imagecreatefromstring(base64_decode($base64));
// this code said null value.
if (!$img) {
return false;
}
imagepng($img, 'tmp.png');
$info = getimagesize('tmp.png');
unlink('tmp.png');
if ($info[0] > 0 && $info[1] > 0 && $info['mime']) {
return true;
}
return false;
}
//-------------------end --------//
