我正在使用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]">
问题: 如何分隔此代码,以便只有图片上传选项才能访问它,而视频上传选项会访问不同的代码并做出不同的反应?
如果有任何其他解决方案,我将不胜感激。
答案 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!