Компрессор. js - Загрузить изображение с помощью обычной отправки формы (нет Ajax) - PullRequest
Новая
       26

Компрессор. js - Загрузить изображение с помощью обычной отправки формы (нет Ajax)

0 голосов
/ 24 февраля 2020

Я использую следующий скрипт для сжатия изображений на стороне клиента перед загрузкой:

https://github.com/fengyuanchen/compressorjs

Я могу загрузить изображения в порядке через Ajax используя следующий код: 

// Following is a form with #name and #image input fields and #submit button:

var formData = new FormData();

$('#image').change(function(e) {
    var img = e.target.files[0];
    new Compressor(img, {
        quality: 0.8,
        maxWidth: 1600,
        maxHeight: 1600,
        success(result) {
            formData.append('image', result, result.name);
        },
    });
});

$('#submit').click(function() {
    formData.append('name', $('#name').val());

    $.ajax({
        type: 'POST',
        url: 'form-script.php',
        data: formData,
        contentType: false,
        processData: false
    }).done(function() {

    }); 
});

Мне нужно загрузить изображение с помощью обычной отправки формы -no Ajax -, но мне не удалось это сделать. Я спрашиваю, как использовать результат в следующем коде, чтобы сжатое изображение было отправлено при отправке формы. В качестве примечания я использую PHP на стороне сервера. 

$('#image').change(function(e) {
    var img = e.target.files[0];
    new Compressor(img, {
        quality: 0.7,
        maxWidth: 1200,
        maxHeight: 1200,
        success(result) {
            // ??
        },
    });
});

Спасибо.

1 Ответ

0 голосов
/ 16 марта 2020

После дальнейших исследований и испытаний я смог найти способ размещения сжатого изображения без Ajax, используя следующее:

Форма: 

<form id="form" action="" method="post" enctype="multipart/form-data">
    <input type="text" id="name" name="name">
    <input type="file" id="image">
    <!-- A hidden input is needed to put the image data after compression. -->
    <input type="hidden" id="image-temp" name="image">
    <input type="submit" name="submit" value="Submit">
</form>

Сжатие изображения: 

$('#image').change(function(e) {
    var img = e.target.files[0];
    new Compressor(img, {
        quality: 0.8,
        maxWidth: 1600,
        maxHeight: 1600,
        success(result) {
            var reader = new FileReader();
            reader.readAsDataURL(result);
            reader.onloadend = function() {
                var base64data = reader.result;
                $('#image-temp').val(base64data);
            }
        },
    });
});

Сторона сервера (PHP): 

if (isset($_POST['submit'])) {
    /* Get other form data as usual. */
    $name = $_POST['name'];

    if (!empty($_POST['image'])) {
        file_put_contents('images/image.jpg', file_get_contents($_POST['image']));
    }
}

Используйте то, что вы хотите для каталога (images /) и имени файла (image.jpg), когда вы будете sh.

Для нескольких изображений используйте классы для JS части, и al oop для PHP части.

...