Question

我正在使用 Opencart版本2.0.3.1 。

客户可以在产品页面中上传image (upload file option)。我想在同一页面中preview the uploaded image。上传的图像将保存到system/upload文件夹，并使用文件名+某些字符串重命名。

如何预览上传的图片。

文件上传按钮代码为：（目录/视图/主题/默认/模板/ 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 } ?>

Answer 1

不是最佳解决方案，但你可以尝试这个。

添加

<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]); } }

希望它能奏效：）

在Opencart中的产品页面中预览上传的图像

1 个答案: