Opencart - 客户将不同的文件上传到一个产品,其中包含来自网站的不同响应

时间:2014-04-03 21:01:04

标签: image file upload opencart option

我正在使用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]">

问题: 如何分隔此代码,以便只有图片上传选项才能访问它,而视频上传选项会访问不同的代码并做出不同的反应?

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

1 个答案:

答案 0 :(得分:0)

我更改了以下代码:

<!-- 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 } ?>

感谢小费shadyyx!