在magento1.9中使用AJAX插入自定义模块的图像后，如何刷新管理员端编辑页面块

编程问答 2022-06-08

问题描述

我已经创建了一个自定义模块，用于从管理端将图像插入到与magento1.9中的目录产品相同的自定义数据库中

以下是我的控制器功能，用于在自定义数据库中插入图像。该控制器函数正在使用ajax从phtml文件进行调用，并且运行良好。

此控制器文件的路径是本地/[CompanyName]/[ModuleName]/controllers/Adminhtml/vendorProductController.php文件

    public function saveImageAction(){
        $data = $this->getRequest()->getPost();
        $id = $data['productDataId'];
        if (isset($_FILES)) {
            if ($_FILES['image']['name']) {
                $i=0;
                foreach ($_FILES['image']['name'] as $value) {
                    if ($id) {
                        $model = Mage::getSingleton('vendor/vendorProductRequestData')->load($this->getRequest()->getParam("id"));
                        if ($model->getData('image')) {
                            $io = new Varien_Io_File();
                            $io->rm(Mage::getBaseDir('media').DS.implode(DS,explode('/',$model->getData('image'))));
                        }
                    }
                    $path = Mage::getBaseDir('media') . DS . '[CompanyName]' . DS .'ProductImage'.DS;
                    $uploader = new Varien_File_Uploader("image[$i]");
                    $uploader->setAllowedExtensions(array('jpg','png','gif'));
                    $uploader->setAllowRenameFiles(false);
                    $uploader->setFilesDispersion(false);
                    $destFile = $path.$_FILES['image']['name'][$i];
                    $filename = $uploader->getNewFileName($destFile);
                    $uploader->save($path,$filename);

                    $post_data['image']='CompanyName/ProductImage/'.$filename;
                    $mediaAttribute = array (
                        'all_images','image','thumbnail','small_image'
                    );
                    $_product = Mage::getModel("vendor/vendorProductRequestImage");
                    $_product->setData('vendor_product_request_data_id',$id);
                    $_product->setData('all_images',$post_data['image']);

                    $_product->save();

                    $i++;
                }
            }
        }
        $this->_redirectReferer();
    }

下面是我的Tabs.php文件，用于调用自定义模块的标签。

<?php
class [CompanyName]_[ModuleName]_Block_Adminhtml_VendorProduct_Edit_Tabs extends Mage_Adminhtml_Block_Widget_Tabs
{

    public function __construct()
    {
        parent::__construct();
        $this->setId('vendorproduct_tabs');
        $this->setDestElementId('edit_form');
        $this->setTitle(Mage::helper('vendor')->__('Vendor Information'));
    }

    protected function _beforeToHtml()
    {
        $this->addTab('form_section',array(
            'label' => Mage::helper('vendor')->__('Vendor Product Data'),'title' => Mage::helper('vendor')->__('vendor Product Data'),'content' => $this->getLayout()->createBlock('vendor/adminhtml_vendorproduct_edit_tab_form')->toHtml(),));
        $this->addTab('image_section',array(
            'label' => Mage::helper('vendor')->__('Image'),'title' => Mage::helper('vendor')->__('Product Image'),'content' => $this->getLayout()->createBlock('vendor/adminhtml_vendorproduct_edit_tab_image')->toHtml(),));
        return parent::_beforeToHtml();
    }
}

下面是我的image.php文件（标签），通过它我可以显示phtml文件以从管理端插入图像

<?php

class [CompanyName]_Vendor_Block_Adminhtml_VendorProduct_Edit_Tab_Image extends Mage_Adminhtml_Block_Widget_Form
{

    public function __construct()
    {
        parent::__construct();
        $this->setUseAjax(true);

        $this->setTemplate('vendor/product.phtml');
    }

    protected function _prepareForm()
    {
        $vendorProductDetail =  Mage::registry('vendorproduct_data');

        $form = new Varien_Data_Form(array(
            'id' => 'edit_form','action' => $this->getUrl('*/*/save',array('id' => $this->getRequest()->getParam('id'))),'method' => 'post','enctype' => 'multipart/form-data'

        )
    );
        $this->setForm($form);


        if ( Mage::getSingleton('adminhtml/session')->getVendorData() )
        {
            $form->setValues(Mage::getSingleton('adminhtml/session')->getVendorData());
            Mage::getSingleton('adminhtml/session')->setVendorData(null);
        } elseif ( Mage::registry('vendorproduct_data') ) {
            $form->setValues(Mage::registry('vendorproduct_data')->getData());
        }
        $this->setForm($form);
        $form->setValues($vendorProductDetail->getData());
        return parent::_prepareForm();

    }

    public function getImage(){
        $id = $this->getRequest()->getParam("id");

        $connection = Mage::getSingleton('core/resource')->getConnection('core_read');
        $imageData = Mage::getModel('vendor/vendorProductRequestImage')->getCollection()->getSelect()->where('vendor_product_request_data_id=?',$id);
        $allImage = $connection->fetchAll($imageData);

        return $allImage;
    }

    public function getSelectedImage(){
        $id = $this->getRequest()->getParam("id");

        $connection = Mage::getSingleton('core/resource')->getConnection('core_read');
        $imageData = Mage::getModel('vendor/vendorProductRequestImage')->getCollection()->getSelect()->where('vendor_product_request_data_id=?',$id)->where('image != ?',null);

        $selectedImage = $connection->fetchRow($imageData);
        return $selectedImage;
    }
    public function getSmallImage(){
        $id = $this->getRequest()->getParam("id");

        $connection = Mage::getSingleton('core/resource')->getConnection('core_read');
        $imageData = Mage::getModel('vendor/vendorProductRequestImage')->getCollection()->getSelect()->where('vendor_product_request_data_id=?',$id)->where('small_image != ?',null);

        $smallImage = $connection->fetchRow($imageData);
        return $smallImage;
    }
    public function getThumbImage(){
        $id = $this->getRequest()->getParam("id");

        $connection = Mage::getSingleton('core/resource')->getConnection('core_read');
        $imageData = Mage::getModel('vendor/vendorProductRequestImage')->getCollection()->getSelect()->where('vendor_product_request_data_id=?',$id)->where('thumbnail != ?',null);

        $thumbImage = $connection->fetchRow($imageData);
        return $thumbImage;
    }

}

下面是显示它的phtml文件。

<table cellspacing="0"  class="data border" width="100%">
        <thead>
            <tr class="headings">
                <th><?php echo Mage::helper('vendor')->__('Image') ?></th>
                <th><?php echo Mage::helper('vendor')->__('Label') ?></th>
                <th><?php echo Mage::helper('vendor')->__('Sort Order') ?></th>
                <th><?php echo Mage::helper('vendor')->__('Base Image') ?></th>
                <th><?php echo Mage::helper('vendor')->__('Small image') ?></th>
                <th><?php echo Mage::helper('vendor')->__('Thumbnail') ?></th>
                <th><?php echo Mage::helper('vendor')->__('Exclude') ?></th>
                <th class="last"><?php echo Mage::helper('vendor')->__('Remove') ?></th>
            </tr>
        </thead>
        <tbody>
            <div id="image-result">
                <?php for($j=0;$j<count($this->getImage());$j++){ ?>
        
                <tr>
                    <?php if($i==0 && $this->getImage()[$j]['all_images']): ?>
                        <td> <?php echo "<img src='".Mage::getBaseUrl('media').trim($this->getImage()[$j]['all_images'])."' width='100px' />"; ?></td>
                        <td><input type="text" name="label" id=""></td>     
                        <td><input type="text" name="label" id=""></td>     
                        <td><input type="radio" name="image" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if($this->getImage()[$j]['all_images'] == $this->getSelectedImage()['image']){echo 'checked';}else{echo '';} ?>></td>        
                        <td><input type="radio" name="smallImg" id="" value="<?php echo $this->getImage()[$j]['all_images']?>" <?php if($this->getImage()[$j]['all_images'] == $this->getSmallImage()['small_image']){echo 'checked';}else{echo '';} ?> ></td>      
                        <td><input type="radio" name="thumbnail" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if($this->getImage()[$j]['all_images'] == $this->getThumbImage()['thumbnail']){echo 'checked';}else{echo '';} ?>  ></td>     
                        <td><input type="checkbox" name="exclude" id=""></td>       
                        <td><input type="checkbox" name="remove[]" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>"></td>        
                    <?php endif; ?>
                    <?php if($i==1 && $this->getImage()[$j]['all_images']): ?>
                        <td> <?php echo "<img src='".Mage::getBaseUrl('media').trim($this->getImage()[$j]['all_images'])."' width='100px' />"; ?></td>
                        <td><input type="text" name="label" id=""></td>     
                        <td><input type="text" name="label" id=""></td>     
                        <td><input type="radio" name="image" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if(!$this->getImage()[$j]['image']){echo '';}else{echo 'checked';} ?> ></td>     
                        <td><input type="radio" name="smallImg" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if(!$this->getImage()[$j]['small_image']){echo '';}else{echo 'checked';} ?> ></td>        
                        <td><input type="radio" name="thumbnail" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if(!$this->getImage()[$j]['thumbnail']){echo '';}else{echo 'checked';} ?> ></td>     
                        <td><input type="checkbox" name="exclude" id=""></td>       
                        <td><input type="checkbox" name="remove[]" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>"></td>        
                    <?php endif; ?>
                    <?php if($i==2 && $this->getImage()[$j]['all_images']): ?>
                        <td> <?php echo "<img src='".Mage::getBaseUrl('media').trim($this->getImage()[$j]['all_images'])."' width='100px' />"; ?></td>
                        <td><input type="text" name="label" id=""></td>     
                        <td><input type="text" name="label" id=""></td>     
                        <td><input type="radio" name="image" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if(!$this->getImage()[$j]['image']){echo '';}else{echo 'checked';} ?> ></td>     
                        <td><input type="radio" name="smallImg" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if(!$this->getImage()[$j]['small_image']){echo '';}else{echo 'checked';} ?>></td>     
                        <td><input type="radio" name="thumbnail" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>" <?php if(!$this->getImage()[$j]['thumbnail']){echo '';}else{echo 'checked';} ?> ></td>     
                        <td><input type="checkbox" name="exclude" id=""></td>       
                        <td><input type="checkbox" name="remove[]" id="" value="<?php echo $this->getImage()[$j]['all_images'] ?>"></td>        
                    <?php endif; ?>
                </tr>
                <?php
            } 
            ?>
        </div>
    </tbody>
</table>
<form id="submitForm" name="doc-form" action="<?php echo Mage::helper('adminhtml')->getUrl('adminhtml/vendorproduct/saveImage',array('form_key' => Mage::getSingleton('core/session')->getFormKey())); ?>" method="post" enctype="multipart/form-data">
    <div style="margin-top:15px;">
        <?php $id = $this->getRequest()->getParam("id"); ?>
        <label for="files"><h3>Select Images:</h3></label>
        <input type="hidden" name="productDataId" value="<?php echo $id; ?>">
        <input type="file" name="image[]" multiple style="padding:5px;" id="files"  />
        <input type="submit" name="saveImage" value="Upload Files" style="padding:5px;"/>
    </div>
</form>

<div>
    <div id="image-result">

    </div>
</div>
<!-- Jquery js -->


<script>
    var $j = jQuery.noConflict();
    $j(document).ready(function() 
    {    
$j(document).ready(function() {
    if (window.File && window.FileList && window.FileReader) {
        $j("#files").on("change",function(e) {

            var files = e.target.files,filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function(e) {
                    var file = e.target;
                    $j("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" width=\"100px\" height=\"100px\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                        "<br/><span class=\"remove\">Remove image</span>" +
                        "</span>").insertAfter("#files");
                    $j(".remove").click(function(){
                        $j(this).parent(".pip").remove();
                    });
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }
});


$j('#submitForm').on('submit',function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $j.ajax({
        type:'POST',url: $j(this).attr('action'),data:formData,cache:false,contentType: false,processData: false,success:function(data){
            console.log("success");
            console.log(data);
        },error: function(data){
            console.log("error");
        }
    });
});
});      
</script>

下面是它的样子 edit/add image grid

以下是我为我的phtml文件添加jquery的代码

<?xml version="1.0"?>
<layout version="0.1.0">
    <adminhtml_vendorproduct_edit>
        <reference name="head">
            <action method="addJs">
                <script>[folderName]/image.js</script>
            </action>                        
            <action method="addCss">
                <stylesheet>css/custom.css</stylesheet>
            </action>
        </reference>
    </adminhtml_vendorproduct_edit>
</layout>

下面的图片是我浏览任何图片以将其插入自定义数据库时的内容 after browse any image

当我单击“上传文件”按钮时，它将使用ajax插入数据库而没有刷新页面。 现在，我想要的是在不刷新此页面的情况下在该网格中显示该插入的图像。 任何人都可以帮助使用ajax做到这一点... 预先感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

magento-1.9

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...