jquery/php如何上传序列化图片数据？

Question

我正在尝试使用 OpenCart 3 中的 http://scottcheng.github.io/cropit/ 扩展裁剪然后上传图像。但是不知道怎么上传序列化图片数据

这是代码的 HTML 部分，实际上是 Cropit 扩展的代码：

<form action="#">
    <div class="image-editor">
        <input type="file" class="cropit-image-input">
        <div class="cropit-preview"></div>
        <div class="image-size-label">
            Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
        <input type="hidden" name="image-data" class="hidden-image-data" />
        <button type="submit"><i class="fa fa-upload"></i> Submit</button>
    </div>
</form>

<div id="result">
    <code>$form.serialize() =</code>
    <code id="result-data"></code>
</div>

和 JQuery / Ajax 脚本：

<script>
$(function() {
    $('.image-editor').cropit();

    $('form').submit(function() {

        // Move cropped image data to hidden input
        var imageData = $('.image-editor').cropit('export');
        $('.hidden-image-data').val(imageData);

        // Print HTTP request params
        var formValue = $(this).serialize();
        $('#result-data').text(formValue);

        // ^   the codes of Cropit extension
        // v   the codes of PHP/OC3 for uploading images

        $('#form-upload').remove();

        $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file[]" value="" multiple="multiple" /></form>');

        if (typeof timer != 'undefined') {
                clearInterval(timer);
        }

        timer = setInterval(function() {
            if (imageData != '') {
                clearInterval(timer);

                $.ajax({
                    url: 'index.php?route=common/filemanager/upload&user_token={{ user_token }}&directory={{ directory }}',
                    type: 'post',
                    dataType: 'json',
                    data: FormData(formValue), //new FormData($('#form-upload')[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        $('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                        $('#button-upload').prop('disabled', true);
                    },
                    complete: function() {
                        $('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
                        $('#button-upload').prop('disabled', false);
                    },
                    success: function(json) {
                        if (json['error']) {
                            alert(json['error']);
                        }

                        if (json['success']) {
                            alert(json['success']);

                            $('#button-refresh').trigger('click');
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            }
        }, 500);

        // Prevent the form from actually submitting
        return false;
    });
});
</script>

有趣的是，点击“提交”按钮后页面会显示 successful image upload 消息，但实际上并未上传文件。

更新：更多信息

这里是 PHP 上传功能：

<?php
    public function upload() {
        $json = array();

        // Make sure we have the correct directory
        if (isset($this->request->get['directory'])) {
            $directory = rtrim(DIR_IMAGE . 'catalog/' . $store_folder_slash . $this->request->get['directory'], '/');
        } else {
            $directory = DIR_IMAGE . 'catalog' . $store_slash_folder;
        }

        // Check its a directory
        if (!is_dir($directory) || substr(str_replace('\', '/', realpath($directory)), 0, strlen(DIR_IMAGE . 'catalog' . $store_slash_folder)) != str_replace('\', '/', DIR_IMAGE . 'catalog' . $store_slash_folder)) {
            $json['error'] = $this->language->get('error_directory');
        }

        if (!$json) {
            // Check if multiple files are uploaded or just one
            $files = array();

//          if (!empty($this->request->files['file']['name']) && is_array($this->request->files['file']['name'])) {
//              foreach (array_keys($this->request->files['file']['name']) as $key) {
//                  $files[] = array(
//                      'name'     => $this->request->files['file']['name'][$key],
//                      'type'     => $this->request->files['file']['type'][$key],
//                      'tmp_name' => $this->request->files['file']['tmp_name'][$key],
//                      'error'    => $this->request->files['file']['error'][$key],
//                      'size'     => $this->request->files['file']['size'][$key]
//                  );
//              }
//          }

//          foreach ($files as $file) {
//              if (is_file($file['tmp_name'])) {
            if ($this->request->server['REQUEST_METHOD'] == 'POST') {
                // Sanitize the folder name
                $encoded = html_entity_decode($this->request->post['data'], ENT_QUOTES, 'UTF-8');

                //decode the url, because we want to use decoded characters to use explode
                $decoded = urldecode($encoded);

                //explode at ',' - the last part should be the encoded image now
                $exp = explode(',', $decoded);

                //we just get the last element with array_pop
                $base64 = array_pop($exp);

                //decode the image and finally save it
                $data = base64_decode($base64);

                if (is_file($data)) {
                    // Sanitize the filename
                    $filename = basename('test.jpg');
                    //$filename = basename(html_entity_decode($file['name'], ENT_QUOTES, 'UTF-8'));

                    if (!in_array(utf8_strtolower(utf8_substr(strrchr($filename, '.'), 1)), $allowed)) {
                        $json['error'] = $this->language->get('error_filetype');
                    }
                } else {
                    $json['error'] = $this->language->get('error_upload');
                }

                if (!$json) {
                    //move_uploaded_file($file, $directory . '/' . $filename);
                    file_put_contents($data, $directory . '/' . $filename);
                }
            }
        }

        if (!$json) {
            $json['success'] = $this->language->get('text_uploaded');
        }

        $this->response->addHeader('Content-Type: application/json');
        $this->response->setOutput(json_encode($json));
    }

哪个return这个错误：
PHP Warning: is_file() expects parameter 1 to be a valid path, string given

不知道怎么算！

Answer 1

终于找到问题并解决了！

问题是 AJAX 使用 data: 'data=' + imageData, 发送数据。我将其更改为：data: {base64data : imageData}

$.ajax({
    url: 'index.php?route=common/filemanager/upload&user_token={{ user_token }}&directory={{ directory }}',
    type: 'post',
    dataType: 'json',
    data: {base64data : imageData},
    ...

jquery/php如何上传序列化图片数据？

How to upload serialized image data in jquery/php?

ajax

jquery

cropit

opencart-3