預覽在Opencart的產品頁面中上傳的圖像

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

希望它會工作:)