Выберите изображение в браузере, измените его размер и отправьте его на сервер с JS, и позвольте PHP сохранить его на сервере

Я работаю над этой классической функцией: выберите файл в браузере («обзор»), позвольте JavaScript изменить его размер (максимальная ширина / высота = 500 пикселей) и загрузить его на сервер, а затем позвольте PHP сохранить его на диск.

Вот то, что у меня в настоящее время есть (на основе этого другого вопроса)

$("#fileupload").change(function(event) { 
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function (readerEvent) {
        var image = new Image();
        image.onload = function (imageEvent) {
            var canvas = document.createElement('canvas'), max_size = 500, width = image.width, height = image.height;
            if (width > height) { if (width > max_size) { height *= max_size / width; width = max_size; } } 
            else { if (height > max_size) { width *= max_size / height; height = max_size; } }
            canvas.width = width;
            canvas.height = height;
            canvas.getContext('2d').drawImage(image, 0, 0, width, height);
            var dataUrl = canvas.toDataURL('image/jpeg');
            var resizedImage = dataURLToBlob(dataUrl);
            $.ajax({type: "POST", url: "index.php", success: function(data, status) { }, data: { content: resizedImage, filename: ?? }});
        }
        image.src = readerEvent.target.result;
    }
    reader.readAsDataURL(file);
}

var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) { var parts = dataURL.split(','); var contentType = parts[0].split(':')[1]; var raw = parts[1]; return new Blob([raw], {type: contentType}); }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); }
    return new Blob([uInt8Array], {type: contentType});
}
<input id="fileupload" type="file">

PHP часть будет:

<?php
if (isset($_POST['content'])) file_put_contents($_POST['filename'], $_POST['content']);
?>

Это в настоящее время не работает, как я должен сделать AJAX часть, чтобы заставить его работать (как отправить данные + имя файла)? Следует FormDataли использовать a, если да, то почему и как?

1 ответ

  1. Для получения сведений об изображении необходимо использовать массив $_FILES:

    if (is_uploaded_file($_FILES['new_img']['tmp_name'])) {
        $newimg = $_FILES['new_img']['name'];
        move_uploaded_file($_FILES['new_img']['tmp_name'], "../images/{$newimg}");
    }
    

    file_put_contents это функция для записи файлов. Когда вы загружаете файл, он хранится в temp dir, поэтому вы можете проверить, is_uploaded_fileчто он загружен с $_FILES['new_img']['tmp_name'].

    Вы можете использовать его первоначальное имя с $_FILES['new_img']['name']или переименовать его для предотвращения впрысок. Затем вы должны переместить изображение в конечное место move_uploaded_file.

    Я почти забыл форму:

    <form action="yourpage.php" method="post" enctype="multipart/form-data">
        Select image to upload:
        <input type="file" name="new_img" id="new_img">
        <input type="submit" value="Upload Image" name="submit">
    </form>