Bootstrap 模态正文：Json 上传 Codeigniter 后刷新

Question

我有一个 Bootstrap 模态弹出窗口，我使用 json 为我在 codeigniter 中的上传调用控制器函数。

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

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

问题如何在json alert success full upload之后让它只刷新内部bootstrap modal-body.

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>

Bootstrap 模态

<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>

Answer 1

你可以这样做：

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

Answer 2

感谢 @Rudi 给了我一个想法，我解决了我自己的问题我所做的是在我的文件管理器控制器中使用 codeigniter 我添加了一个有站点的数据 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));
    }

}

Bootstrap 模态正文：Json 上传 Codeigniter 后刷新

Bootstrap Modal-Body: Json Refresh After Upload Codeigniter

javascript

json

codeigniter

twitter-bootstrap