У меня есть хорошо работающий мультизагрузочный скрипт на php (и немного javascript).
Проблема заключается в том, что пользователи делают снимки прямо с камеры, поэтому размер изображения слишком велик, а скорость мобильной связи мала.
Поэтому я искал решение для изменения размера изображения на стороне клиента и нашел несколько сообщений, связанных с FileReader и canvas.
Моя проблема заключается в том, как загрузить «результат» чтения файлов с помощью моего php-скрипта загрузки.
Вот что у меня есть:
HTML:
<input id="fileupload" type="file" name="images[]" multiple/>
Javascript для динамического добавления полей загрузки и предварительного просмотра загрузок:
var abc = 0;
$(document).ready(function() {
$('#add-file-field').click(function() {
$("#newrow").append("<div class='col-sm-4'><div id='newrow' class='card'><div class='card-body'><input id='fileupload' type='file' name='images[]' multiple/></div></div></div>");
});
$('body').on('change', '#fileupload', function(){
if (this.files && this.files[0]) {
abc += 1;
var z = abc - 1;
var x = $(this).parent().find('#previewimg' + z).remove();
$(this).before("<div id='abcd"+ abc +"' class='card-img-top abcd'><img id='previewimg" + abc + "' src='' style='width:100%; height:100%;'/></div>");
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
$(this).hide();
$("#abcd"+ abc).append($("<img/>", {id: 'delete', src: 'x.png', alt: 'delete'}).click(function() {
$(this).parent().parent().parent().remove();
}));
}
});
//To preview image
function imageIsLoaded(e) {
$('#previewimg' + abc).attr('src', e.target.result);
};
$('#upload').click(function(e) {
var name = $(":file").val();
if (!name)
{
alert("First Image Must Be Selected");
e.preventDefault();
}
});
});
И скрипт Php:
$lastpositionid = $_SESSION['lastpositionid'];
$query = "INSERT INTO media (posid,orderid,name,image,created,tag,type) VALUES('$lastpositionid',$position->order_id,?,?,'$date','Vorher',?)";
$stmt = $con->prepare($query);
if(isset($_FILES['images'])){
$countfiles = count($_FILES['images']['name']);
$target_directory = "../uploads/". $position->order_id;
$file_upload_error_messages="";
for($i=0;$i<$countfiles;$i++){
if(!is_dir($target_directory)){
mkdir($target_directory, 0777, true);
}
$filename = $_FILES['images']['name'][$i];
$shafilename = sha1_file($_FILES['images']['tmp_name'][$i]) . "-" . date('d-m-Y-H-i-s') . "-" . basename($_FILES["images"]["name"][$i]);
$media->image = $filename[$i];
$file_size = $_FILES['images']['size'][$i];
$ext = end((explode(".", $filename)));
$valid_ext = array('jpg','JPG','jpeg','JPEG','png','PNG','gif','GIF','mov','MOV','mp4','MP4');if(!empty($_FILES["images"]["tmp_name"][$i])){
if($file_size > 104857600){
$file_upload_error_messages.= "<div class=\"alert alert-danger alert-dismissable\">";
$file_upload_error_messages.= "</div>";
}
if(in_array($ext, $valid_ext)){
}
else{
$file_upload_error_messages.= "<div class=\"alert alert-danger alert-dismissable\">";
$file_upload_error_messages.= "</div>";
}
if(!empty($file_upload_error_messages)){
$file_upload_error_messages.= "<div class=\"alert alert-danger alert-dismissable\">";
$file_upload_error_messages.= "</div>";
}
if(empty($file_upload_error_messages)){
if(move_uploaded_file($_FILES['images']['tmp_name'][$i],$target_directory."/".$shafilename)){
echo "<div class=\"alert alert-success alert-dismissable\">";
echo "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">×</button>";
echo "</div>";
// Execute query
$stmt->execute(array($shafilename,'uploads/'.$position->order_id.'/'.$shafilename,$ext));
}
}
}
}
print_r($file_upload_error_messages);
}
Теперь я думаю, что мог бы использовать этот скрипт (или похожий, который я нашел здесь):
function handleFiles()
{
var filesToUpload = document.getElementById('fileupload').files;
var file = filesToUpload[0];
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
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 = 400;
var MAX_HEIGHT = 300;
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;
}
// Load files into file reader
reader.readAsDataURL(file);
}
Сценарий FileReader мне понятен, кроме части, как загрузить его снова с помощью php. Кстати, я больше знаком с php, чем с js, и еще одна проблема заключается в том, как интегрировать эту функциональность в мой существующий скрипт …
У меня нет внешнего скрипта загрузки, все это в одном и том же php файле.
Благодарю.
Вы не можете сжать изображение на стороне клиента и загрузить его в виде файла, но вы можете сжать изображение и затем получить dataURI сжатого изображения и загрузить его в виде строки, а затем преобразовать его обратно в изображение на серверная сторона.
var maxWidth = 100;
var maxHeight = 100;
document.getElementById("myfile").onchange = function() {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
var cnvs = document.createElement('canvas');
var rectRatio = img.width / img.height;
var boundsRatio = maxWidth / maxHeight;
var w, h;
if (rectRatio > boundsRatio) {
w = maxWidth;
h = img.height * (maxWidth / img.width);
} else {
w = img.width * (maxHeight / img.height);
h = maxHeight;
}
cnvs.width = w;
cnvs.height = h;
var ctx = cnvs.getContext('2d');
ctx.drawImage(img, 0, 0, w, h);
var uri = cnvs.toDataURL();
// Do something here to upload the smaller verion of the datauri
// for now i'm just putting it on the page though
document.body.innerHTML = '<img src="' + uri + '">';
};
img.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
}
<input type=file id=myfile accept=".png">
Других решений пока нет …