Я начал с простого html-файла с формой ввода, чтобы получить изображение, которое позволяет вам загрузить изображение в простой скрипт php, чтобы сохранить его. Это работает с любым размером изображения.
Но загрузка велика, поэтому я хочу изменить размер клиента перед загрузкой. Я нашел несколько примеров, но они либо неполные, и я не могу заставить их работать, либо они используют base64, который достигает предела в 500 тыс.
Кажется, все должно быть так просто ...
То, что у меня есть на данный момент, работает с использованием base64, но оно ограничено 500k или не работает. Я думаю, что это означает использование капли, но я не могу решить это
Я избавился от большинства дополнительных вещей, включая несколько файлов и обработку exif, оставив следующий код.
Обратите внимание, что в fileChange я делю простое деление ширины и высоты на 2, чтобы уменьшить размер. В моей системе происходит сбой с ошибкой:
The requested resource
/upload2.php5
does not allow request data with GET requests, or the amount of data provided in the request exceeds the capacity limit.
Additionally, a 413 Request Entity Too Large error was encountered while trying to use an ErrorDocument to handle the request.
Если я изменю его размер, чтобы он стал меньше, он в конечном итоге сработает, но он станет слишком маленьким. Также я хочу загрузить несколько файлов, и кажется, что они все смешаны в форме.
Пожалуйста, помогите !!!
HTML и Javascript ниже:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<form id="theform" action="upload2.php5" method="post" enctype="multipart/form-data">
Title: <input id="title" name="title" type="text" value="" /><br/><br/>
<input type="file" id="originalimage" accept="image/*" capture="environment"/><br/>
<input id="finalimage" name="finalimage" type="hidden" value="" /><br/>
<input id="submit_button" type="submit" onclick="beforesubmit()" value="Upload Image" />
</form>
<script>
function fileChange(e) {
var file = e.target.files[0];
if (file.type == "image/jpeg" || file.type == "image/png") {
var reader = new FileReader();
reader.onload = function(readerEvent) {
var image = new Image();
image.onload = function(imageEvent) {
var canvas = document.createElement('canvas');
// Set variables
var ctx = canvas.getContext("2d");
var width = image.width/2, height = image.height/2;
canvas.width = height;
canvas.height = width;
// Draw image into canvas
ctx.drawImage(image, 0, 0, width, height);
if (file.type == "image/jpeg") {
var dataURL = canvas.toDataURL("image/jpeg", 0.95);
} else {
var dataURL = canvas.toDataURL("image/png", 0.95);
}
document.getElementById('finalimage').value = dataURL;
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
} else {
document.getElementById('originalimage').value = '';
document.getElementById('finalimage').value = '';
alert('Please only select images in JPG- or PNG-format.');
}
}
function beforesubmit() {
// Try to prevent upload of the original image by nulling it out first
document.getElementById('originalimage').value = '';
}
// When original image is changed, resample and process into the form
document.getElementById('originalimage').addEventListener('change', fileChange, false);
</script>
</body>
</html>
PHP ниже:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="zoom:100%;">
<div>
<?php
$post_title = isset($_POST['title']) ? $_POST['title'] : "";
$post_image = isset($_POST['finalimage']) ? $_POST['finalimage'] : "";
if (strpos($post_image, 'data:image/jpeg;base64,') === 0) {
$post_image = str_replace('data:image/jpeg;base64,', '', $post_image);
$ext = '.jpg';
}
if (strpos($post_image, 'data:image/png;base64,') === 0) {
$post_image = str_replace('data:image/png;base64,', '', $post_image);
$ext = '.png';
}
$post_image = str_replace(' ', '+', $post_image);
$data = base64_decode($post_image);
$file = 'uploads/img'.date("YmdHis").$ext;
if (file_put_contents($file, $data)) {
echo '<p>Image "'.$post_title.'" was uploaded as '.$file.'</p>';
} else {
echo '<p>Image could not be uploaded.</p>';
}
?>
</div>
</body>
</html>