Bootstrap模态主体:Json在上传Codeigniter后刷新

Bootstrap Modal-Body: Json Refresh After Upload Codeigniter

本文关键字:Codeigniter 刷新 模态 主体 Json Bootstrap      更新时间:2023-09-26

我有一个Bootstrap Modal弹出窗口,我使用json来调用控制器函数,以便在codeigniter中上传。

一旦显示成功警报,我希望它只刷新内部模型主体,以便显示新上传的文件。

目前我必须刷新整个页面才能查看上传的文件。

问题在json警报成功完全上传后,我如何让它只刷新内部引导模式主体。

Json/Java脚本

<script type="text/javascript"><!--
$('#button-upload').on('click', function() {
  $('#form-upload').remove();
  $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');
  $('#form-upload input[name=''file'']').trigger('click');
  timer = setInterval(function() {
    if ($('#form-upload input[name=''file'']').val() != '') {
      clearInterval(timer);
      $.ajax({
        url: 'admin/common/filemanager/upload',
        type: 'post',   
        dataType: 'json',
        data: new FormData($('#form-upload')[0]),
        cache: false,
        contentType: false,
        processData: false,   
        beforeSend: function() {
          $('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
          $('#button-upload').prop('disabled', true);
        },
        complete: function() {
          $('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
          $('#button-upload').prop('disabled', false);
        },
        success: function(json) {
          if (json['error']) {
            alert(json['error']);
          }
          if (json['success']) {
            alert(json['success']);
            $('#button-refresh').trigger('click');
          }
        },      
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "'r'n" + xhr.statusText + "'r'n" + xhr.responseText);
        }
      }); 
    }
  }, 500);
});
</script>

引导模式

<div class="container" style="margin-top: 3%;">
<div class="row">
<div class="col-lg-offset-1 col-lg-10 ">
<div class="modal-content">
<div class="modal-header clearfix">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close &times;</button>
<h4 class="modal-title">File Manager</h4>
</div>
<div class="modal-body">
<?php echo $resize_error;?>
<div class="row">
<div class="col-sm-5">
<button type="button" data-toggle="tooltip" title="Upload" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i> Select A File</button>
</div>
</div>
<hr />
<?php foreach (array_chunk($images, 4) as $image) { ?>
<div class="row">
<?php foreach ($image as $image) { ?>
<div class="col-sm-3 text-center">
<?php if ($image['type'] == 'directory') { ?>
<div class="text-center"><a href="<?php echo $image['href']; ?>" class="directory" style="vertical-align: middle;"><i class="fa fa-folder fa-5x"></i></a></div>
<label>
<input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
<?php echo $image['name']; ?></label>
<?php } ?>
<?php if ($image['type'] == 'image') { ?>
<a href="<?php echo $image['href']; ?>" class="thumbnail"><img src="<?php echo $image['thumb']; ?>" alt="<?php echo $image['name']; ?>" title="<?php echo $image['name']; ?>" /></a>
<label>
<input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
<?php echo $image['name']; ?></label>
<?php } ?>
</div>
<?php } ?>
</div>
<br />
<?php } ?>
</div>
<div class="modal-footer"><?php var_dump($paginations);?>::<?php echo $paginations; ?></div>
</div><!-- /.modal-content -->
</div>
</div>
</div>

你可以这样做:

...
success: function(json) {
    ...
    if (json['success']) {
      $('.modal-body').html('Success! ' + json['success']);
    }
  },
....

感谢@Rudi给了我一个主意,我解决了自己的问题,我所做的是在我的文件管理器控制器中使用代码点火器,我添加了具有网站url的数据,即$data['refresh'] = site_url('admin/common/filemanager');

然后在我的json/javascript代码上,我添加了

<script>
$('#button-refresh').on('click', function(e) {
  e.preventDefault();
  $('#modal-image').load($(this).attr('href'));
});
</scrip>

然后在添加成功之后,我添加了一个触发器。

success: function(json) {
     if (json['error']) {
       alert(json['error']);
     }
     if (json['success']) {
        alert(json['success']);
      $('#button-refresh').trigger('click');
   }
 },  

完整

<div class="container" style="margin-top: 3%;">
<div class="row">
<div class="col-lg-offset-1 col-lg-10 ">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header clearfix">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close &times;</button>
<h4 class="modal-title">File Manager</h4>
</div>
<div class="modal-body">
<?php echo $resize_error;?>
<div class="row">
<div class="col-sm-5">
<button type="button" data-toggle="tooltip" title="Upload" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i> Select A File</button>
<a href="<?php echo $refresh; ?>" id="button-refresh" class="btn btn-default"><i class="fa fa-refresh"></i> Refresh</a>
</div>
</div>
<hr />
<?php foreach (array_chunk($images, 4) as $image) { ?>
<div class="row">
<?php foreach ($image as $image) { ?>
<div class="col-sm-3 text-center">
<?php if ($image['type'] == 'image') { ?>
<a href="<?php echo $image['href']; ?>" class="thumbnail"><img src="<?php echo $image['thumb']; ?>" alt="<?php echo $image['name']; ?>" title="<?php echo $image['name']; ?>" /></a>
<label>
<input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
<?php echo $image['name']; ?></label>
<?php } ?>
</div>
<?php } ?>
</div>
<br />
<?php } ?>
</div>
<div class="modal-footer"><?php var_dump($paginations);?>::<?php echo $paginations; ?></div>
</div><!-- /.modal-content -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('a.thumbnail').on('click', function(e) {
  e.preventDefault();
  <?php if ($element) { ?>
  $('#<?php echo $element; ?>').find('img').attr('src', $(this).find('img').attr('src'));
  <?php } ?>
<?php if ($target) { ?>
  $('#<?php echo $target; ?>').attr('value', $(this).parent().find('input').attr('value'));
  <?php } else { ?>
  var range, sel = document.getSelection(); 
 if (sel.rangeCount) { 
    var img = document.createElement('img');
   img.src = $(this).attr('href');
    range = sel.getRangeAt(0); 
    range.insertNode(img); 
  }
  <?php } ?>
  $('#modal-image').modal('hide');
});
$('#button-refresh').on('click', function(e) {
  e.preventDefault();
  $('#modal-image').load($(this).attr('href'));
});
</script> 
<script type="text/javascript"><!--
$('#button-upload').on('click', function() {
  $('#form-upload').remove();
  $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');
  $('#form-upload input[name=''file'']').trigger('click');
  timer = setInterval(function() {
    if ($('#form-upload input[name=''file'']').val() != '') {
      clearInterval(timer);
      $.ajax({
        url: 'admin/common/filemanager/upload',
        type: 'post',   
        dataType: 'json',
        data: new FormData($('#form-upload')[0]),
        cache: false,
        contentType: false,
        processData: false,   
        beforeSend: function() {
          $('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
          $('#button-upload').prop('disabled', true);
        },
        complete: function() {
          $('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
          $('#button-upload').prop('disabled', false);
        },
        success: function(json) {
          if (json['error']) {
            alert(json['error']);
          }
          if (json['success']) {
            alert(json['success']);
            $('#button-refresh').trigger('click');
          }
        },      
        error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "'r'n" + xhr.statusText + "'r'n" + xhr.responseText);
        }
      }); 
    }
  }, 500);
});
</script>

我的控制器

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
error_reporting(0);
class Filemanager extends MX_Controller {
    public function __construct() {
        parent::__construct();
    }
    public function index() {
        $scan_filter = $this->input->get('filter_name');
        $element = $this->input->get('element');
        //target
        $input = $this->input->get('input');
        if (isset($scan_filter)) {
            $filter_name = rtrim(str_replace(array('../', '..''', '..', '*'), '', $scan_filter), '/');
        } else {
            $filter_name = null;
        }
        $directory = FCPATH . 'image/catalog/';
        $request_page = $this->input->get('page');
        if (isset($request_page)) {
            $page = $request_page;
        } else {
            $page = 1;
        }

        $data['images'] = array();
        // Get directories
        $directories = glob($directory . '/' . $filter_name . '*', GLOB_ONLYDIR);
        $directories = glob($directory);
        if (!$directories) {
            $directories = array();
        }
        // Get files
        $files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);
        if (!$files) {
            $files = array();
        }
        // Merge directories and files
        $images = array_merge($directories, $files);
        // Get total number of files and directories
        $image_total = count($images);
        // Split the array based on current page number and max number of items per page of 10
        $images = array_splice($images, ($page - 1) * 9, 9);
        $server = base_url();
        foreach ($images as $image) {
            $name = str_split(basename($image), 14);
            $config['image_library'] = 'gd2';
            $config['source_image'] = FCPATH . 'image/catalog/'. implode($name);
            $config['create_thumb'] = FALSE;
            $config['maintain_ratio'] = FALSE;
            $config['width'] = 100;
            $config['height'] = 100;
            $config['new_image'] = FCPATH . 'image/cache/'.implode($name);
            $created_thumb = base_url() . 'image/cache/'.implode($name);
            $this->load->library('image_lib', $config);
            $this->image_lib->initialize($config); 
            if (!$this->image_lib->resize()) {  
                $data['resize_error'] = $this->image_lib->display_errors('<div class="alert alert-danger">', '</div>');
            } else {
                // No Resize Errors
                $data['resize_error'] = '';
                if (is_dir($image)) {
                $data['images'][] = array(
                    'thumb' => '',
                    'name'  => implode(' ', $name),
                    'type'  => 'directory',
                    'path'  => utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/')),
                    'href'  => $server . 'image/catalog/' . utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/')), 
                );
                } elseif (is_file($image)) {
                    $server = base_url();
                    $data['images'][] = array(
                        'thumb' => $created_thumb,
                        'name'  => implode(' ', $name),
                        'type'  => 'image',
                        'path'  => utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/')),
                        'href'  => $server . 'image/catalog/' . utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/'))
                    );
                }
            }
        }
        $data['refresh'] = site_url('admin/common/filemanager');
        if ($element) {
            $data['element'] = $element;
        }
        if ($input) {
            $data['target'] = $input;
        }
        $this->load->library('paginations');
        $paginations = new Paginations();
        $paginations->total = $image_total;
        $paginations->page = $page;
        $paginations->limit = 16;
        if ($this->uri->segment(5)) {
            $paginations->url = site_url('admin/common/filemanager/update'.'/'.$this->uri->segment(5).'/'.'{page}');
        } else {
            $paginations->url = site_url('admin/common/filemanager/add'.'/'.'{page}');
        }
        $data['paginations'] = $paginations->render();
        return $this->load->view('template/common/filemanager', $data);
    }
    public function upload() {
        $json = array();
        $config['upload_path'] = './image/catalog/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '100';
        $config['max_width'] = '0';
        $config['max_height'] = '0';
        $this->load->library('upload', $config);
        // Alternately you can set preferences by calling the ``initialize()`` method. Useful if you auto-load the class:
        $this->upload->initialize($config);
        $name = "file";
        if (!$this->upload->do_upload($name)) {
            $json['error'] = $this->upload->display_errors('<div class="alert alert-danger"', '</div>');
        } else {
            $json['success'] = '<div class="alert alert-success">Success</div>';
        }
        $this->output->set_content_type('Content-Type: application/json');
        $this->output->set_output(json_encode($json));
    }
}