Я использую Opencart 1.5.6, и у меня есть два варианта загрузки файлов для одного продукта. Один вариант - это изображение, а другой - видео. Я настраиваю его, чтобы показать предварительный просмотр изображения после их загрузки.

Вcatalog/controller/product/product.php подpublic function upload() Я изменил код следующим образом, чтобы получить уменьшенное изображение и изменить сообщение об успехе:

if (!$json && is_uploaded_file($this->request->files['file']['tmp_name']) && file_exists($this->request->files['file']['tmp_name'])) {
            $file = basename($filename) . '.' . md5(mt_rand());

            // Hide the uploaded file name so people can not link to it directly.

            $json['file'] = $this->encryption->encrypt($file);

        //ADDED THIS//
            $json['thumb'] = $file;

            move_uploaded_file($this->request->files['file']['tmp_name'], DIR_DOWNLOAD . $file);

        //CHANGED THIS//
            $json['success'] = 'The file "' . basename($filename) . '" has been uploaded.';
        }

Вcatalog/view/theme/<mytheme>/template/product/product.tpl Я добавил div, чтобы разместить миниатюру.

<div class="image-area" style="width:300px;height:215px;overflow:hidden;"></div>

Затем в нижней частиproduct.tpl Я сделал следующее изменение:

<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
    action: 'index.php?route=product/product/upload',
    name: 'file',
    autoSubmit: true,
    responseType: 'json',
    onSubmit: function(file, extension) {
        $('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />');
        $('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', true);
    },
    onComplete: function(file, json) {
        $('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', false);

        $('.error').remove();

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

            $('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json['file']);
        }

        if (json['error']) {
            $('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json['error'] + '</span>');
        }

        $('.loading').remove(); 
 <!-- ADDED THIS -->            
 <!-- Show thumb -->
        $(".image-area").html('<img src="download/' + json.thumb + '"/><h6>Image File Preview</h6>');

    }
});
//--></script>

Весь приведенный выше код работает отлично. Когда я загружаю изображение, оно выдает сообщение об успехе, которое включает имя файла, и отображает изображение в div, который я создал для него.

Проблема в том, что когда я нажимаю кнопку загрузки для загрузки видео и загрузки изображения (я не ограничил это просто загрузкой только видеофайлов). Он заменит область предварительного просмотра изображения из предыдущей загрузки на все, что я загрузил в область видео. Я знаю, что это потому, что он обращается к одному и тому же коду.

HTML для обеих кнопок на передней части выглядит следующим образом:

<label style="max-width:200px;"> Upload File:</label>
<input id="button-option-227" class="button " type="button" value="Upload File">
<input type="hidden" value="2J5cqKQ0z8g96DwobtxqZfWcS925rtBIl0U3cSmI06f3EEs9E-6m9k_22emKdPkcR9QjwK3zDdW1I7S4vqQZew,," name="option[227]">

<label style="max-width:200px;">Upload Video:</label>
<input id="button-option-228" class="button " type="button" value="Upload File">
<input type="hidden" value="sbG0MtD_ebRQBeO73zWTNWhK8Y1rf-O6L3422G7D6FNjxlo0FM3GhoC5a1HiZk9DYgX5hjUPj5yxogQ67LrK-A,," name="option[228]">

Вопрос:Как я могу отделить этот код так, чтобы только опция загрузки изображения получала к нему доступ, а опция загрузки видео получала доступ к другому коду и отвечала по-другому?

Если есть какие-то другие решения, я буду признателен за любые советы.