【问题标题】:Bootstrap Modal-Body: Json Refresh After Upload CodeigniterBootstrap Modal-Body:上传 Codeigniter 后 Json 刷新
【发布时间】:2015-02-11 05:59:55
【问题描述】:

我有一个 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>

【问题讨论】:

    标签: javascript json twitter-bootstrap codeigniter


    【解决方案1】:

    你可以这样做:

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

    【讨论】:

    • 谢谢我需要它来刷新它并仍然以您的方式显示新数据只是显示新消息。仍然需要展示新内容。
    • 好的,只需将消息替换为您喜欢的任何新内容即可?
    • 不确定我是否理解正确。但是您可以例如通过 ajax 调用检索新内容,并通过json['content'] 或您设置的任何内容输出。
    【解决方案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));
        }
    
    }
    

    【讨论】:

      猜你喜欢
      • 2016-04-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-11-14
      • 2018-05-17
      相关资源
      最近更新 更多