客户将不同的文件上传到一个产品，并从网站获得不同的响应

Question

我正在使用Opencart 1.5.6，我有一个产品有两个文件上传选项。一个选项是图像，另一个是视频。我正在将其设置为在上传后显示图像的预览。

在public function upload() catalog/controller/product/product.php下，我按如下方式更改了代码以获取缩略图并更改成功消息：

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]">

问题：如何分离此代码，以便只有图像上传选项将访问它，而视频上传选项将访问不同的代码并做出不同的响应？

如果有任何其他解决方案，我将不胜感激任何提示。

Answer 1

我更改了以下代码：

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

自：

<!-- Show thumb -->
        <?php if  ($option['product_option_id'] == <<IMAGE OPTION ID>>) { ?>
            $(".image-area").html('<img src="download/' + json.thumb + '"/><h6>Image File Preview</h6>');
        <?php } ?>

感谢您的提示！