我正在使用Opencart 版本 2.0.3.1。
客户可以在产品页面上传图像(上传文件选项)
。我想在同一页面中预览上传的图像
。上传的图像保存到 system/upload
文件夹中,并使用文件名+一些字符串重命名。
如何预览上传的图片。
文件上传按钮代码为:(catalog/view/theme/default/template/product.product.tpl)
<?php if ($option['type'] == 'file') { ?>
<div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<button type="button" id="button-upload<?php echo $option['product_option_id']; ?>" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-default btn-block"><i class="fa fa-upload"></i> <?php echo $button_upload; ?></button>
<input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="" id="input-option<?php echo $option['product_option_id']; ?>" />
</div>
<?php } ?>
最佳答案
不是最佳解决方案,但您可以尝试这个。
添加
<img id="filePreview" style="display:none;">
之后
<?php if ($option['type'] == 'file') { ?>
添加
var ref = '';
$(document).on('change','input[name="file"]',function(){
ref = this;
});
之前
$('button[id^=\'button-upload\']').on('click', function() {
在文件上传的ajax请求中,在成功函数中添加此
if (json['error']) {
ref = '';
$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
}
if (json['success']) {
alert(json['success']);
showImagePreview(ref);
$(node).parent().find('input').attr('value', json['code']);
}
显示预览功能为
function showImagePreview(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#filePreview').attr('src',e.target.result);
$('#filePreview').show();
}
reader.readAsDataURL(input.files[0]);
}
}
希望它能成功:)
关于php - 在 Opencart 的产品页面中预览上传的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33339845/