如何使用Modal和Ajax在CodeIgniter中创建相册库

Question

首先，我有两个桌子！

ci_albums： ID，名称，用户ID。

ci_photos： ID，名称，用户ID，相册ID。

问题是，我正在为注册用户建立“媒体”，使他们能够创建自己的相册并上传照片，然后使用MODAL将其显示在SAME PAGE中。

媒体功能所在的URL是：

  

http://localhost/codeigniter/users/profile/kirasiris.html

因此，为了使注册用户上传他们的媒体，我必须创建此页面：

<section class="showcase" style="background: url(<?php if($item->cover_img) : echo $item->cover_img; else : echo base_url().'assets/img/nocoverimage.gif'; endif ?>)no-repeat center center; background-attachment:unset;">
    <div class="container text-center">
        <img alt="El Que Todo Lo Ve" src="<?php if($item->avatar_img) : echo $item->avatar_img; else : echo base_url().'assets/img/noavatar.jpg'; endif ?>">
        <h1><?= $item->first_name.''.$item->last_name; ?></h1>
        <p><?= $item->occupation; ?></p>
        <a class="btn btn-warning btn-sm" href="#" rel="noopener nofollow noreferrer" target="_blank">Follow</a>
    </div>
</section>
<!-- Profile menu -->
<div class="container-fluid container-profile-menu">
    <div class="container">
        <ul class="nav nav-pills pull-left">
            <li><?= anchor('users/profile/' . $item->username , 'Profile'); ?></li>
            <li><?= anchor('users/about/' . $item->username , 'About'); ?></li>
            <li><?= anchor('users/friends/' . $item->username , 'Friends'); ?></li>
            <li><?= anchor('users/media/' . $item->username , 'Media'); ?></li>
            <li><?= anchor('users/portfolio/' . $item->username , 'Portfolio'); ?></li>
        </ul>
        <ul class="nav nav-pills pull-right">
            <li><?= anchor('#' . $item->username , 'Edit Profile'); ?></li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="page-header"><h1>Media</h1></div>
    <?php if($this->session->username == $item->username) : ?>
        <!--<a href="<?= base_url('users/newmedia'); ?>" class="btn btn-primary btn-sm"><i class="fa fa-upload" aria-hidden="true"></i> Add Photos/Videos</a>
        <a class="btn btn-primary btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Create Albums</a>-->
        <a data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-primary btn-sm" type="button"><i class="fa fa-upload" aria-hidden="true"></i> Add Albums/Photos/Videos</a>
        <!-- Modal -->
        <div class="modal fade in bs-example-modal-lg" id="userModal" aria-hidden="false">
            <div class="modal-dialog modal-xlg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title"><?= $item->username ?> Media</h4>
                    </div>
                    <div class="modal-body">
                        <!--<div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" width="700" height="400" src="<?= base_url("filemanager/dialog.php?type=2&amp;field_id=fieldID4'&amp;"); ?>" frameborder="0"></iframe>
                        </div>-->
                    <?php $args = array(
                        'id'    => 'user_form',
                    ) ?>
                    <?= form_open_multipart('', $args); ?>
                        <!-- Title -->
                        <div class="form-group">
                            <?= form_label('Title:', 'title'); ?>
                            <?php $data = array(
                                'id'    =>  'title',
                                'name'  =>  'title',
                                'class' =>  'form-control',
                                'value' =>  set_value('title'),
                            ); ?>
                            <?= form_input($data); ?>
                        </div>
                        <!-- Description -->
                        <div class="form-group">
                            <?= form_label('Description:', 'body'); ?>
                            <?php $data = array(
                                'id'    =>  'body',
                                'name'  =>  'body',
                                'class' =>  'form-control',
                                'value' =>  set_value('body'),
                                'style' =>  'max-width: 100%'
                            ); ?>
                            <?= form_textarea($data); ?>
                        </div>
                        <!-- File Input -->
                        <div class="input-group">
                            <label class="input-group-btn">
                                <span class="btn btn-warning">
                                    Browse 
                                    <?php $data = array(
                                            'id'    =>  'post_image',
                                            'name'  =>  'post_image',
                                            'class' =>  'form-control',
                                            'value' =>  set_value('post_image'),
                                            'multiple'  =>  'multiple',
                                            'style' =>  'display:none',
                                        ); ?>
                                        <?= form_upload($data); ?>
                                </span>
                            </label>
                            <input type="text" class="form-control" readonly>
                        </div>
                        <span class="help-block">
                            Try selecting one or more files and watch the feedback
                        </span>
                        <!-- Submit -->
                        <?php $args = array(
                            'id'    =>  'mysubmit',
                            'class' =>  'btn btn-warning btn-sm'
                        ); ?>
                        <?= form_submit('mysubmit', 'Create', $args); ?>

                    <?= form_close(); ?>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <br><br>
    <?php endif; ?>
    <div class="panel panel-default">
        <div class="panel-body">
            HERE GOES THE MEDIA
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {

    // We can attach the `fileselect` event to all file inputs on the page
    $(document).on('change', ':file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
    });

    // We can watch for our custom `fileselect` event like this
    $(document).ready( function() {
        $(':file').on('fileselect', function(event, numFiles, label) {

            var input = $(this).parents('.input-group').find(':text'),
                log = numFiles > 1 ? numFiles + ' files selected' : label;

            if( input.length ) {
                input.val(log);
            } else {
                if( log ) alert(log);
            }

        });
    });

    });
</script>
<script type="text/javascript">
 $(document).ready(function(){  
      $(document).on('submit', '#user_form', function(event){  
           event.preventDefault();  
           var title = $('#title').val();  
           var body = $('#body').val();  
           var extension = $('#post_image').val().split('.').pop().toLowerCase();  
           if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)  
           {  
                alert("Invalid Image File");  
                $('#post_image').val('');  
                return false;  
           }  
           if(title != '' && body != '')  
           {  
                $.ajax({  
                     url:"<?php echo base_url('index.php/users/media/'.$this->session->username); ?>",  
                     method:'POST',  
                     data:new FormData(this), 
                     contentType:false,  
                     processData:false,  
                     success:function(data)  
                     {  
                          alert(data);  
                          $('#user_form')[0].reset();  
                          $('#userModal').modal('hide');  
                          dataTable.ajax.reload();  
                     }  
                });  
           }  
           else  
           {  
                alert("Both Fields are Required");  
           }  
      });  
 });
</script>

，Ajax URL进入我的USERS Controller中的此功能：

public function media($username){
        // Check Login
        if(!$this->session->userdata('is_member')){

            redirect('users/login');

        }

        // Get user info
        $data['item'] = $this->User_model->get_profile($username);

        //Set rules
        $this->form_validation->set_rules('title', 'Title', 'trim|required|min_length[2]');
        $this->form_validation->set_rules('body', 'Description', 'trim|required|min_length[2]');
        $this->form_validation->set_rules('post_image', 'Cover Image', 'trim|required|min_length[4]');

        if ($this->form_validation->run() == TRUE) {

            $slug = str_replace('/[^a-z0-9]+/i ', '-', $this->input->post('title'));
            $slug = strtolower($slug);

            // Upload Image
            $config['upload_path'] = 'assets/img/albums/';
            $config['allowed_types'] = 'gif|jpg|png';
            $config['encrypt_name'] = TRUE;
            $config['max_size'] = '2048';
            $config['max_width'] = '2000';
            $config['max_height'] = '2000';
            $this->load->library('upload', $config);
            $this->upload->initialize($config);


            $file_name = 'post_image';

            if(!$this->upload->do_upload($file_name)){
                varDebug($this->upload->display_errors());
                $file_name = 'assets/img/noimage.jpg';
            } else {
                $post_image =  $this->upload->data('file_name');
            }
            // Create Page Data Array
            $data = array(
                'user_id' => $this->session->userdata('user_id'),
                'title' => $this->input->post('title'),
                'slug'  =>  $slug,
                'post_image'      => $post_image,
                'body'  => $this->input->post('body'),
                'type'  =>  'album'
            );
            // Add Album
            $this->User_model->add_media($data);

            //Activity Array
            $data = array(
                'resource_id' => $this->db->insert_id(),
                'type'        => 'album',
                'action'      => 'created',
                'user_id'     => $this->session->userdata('user_id'),
                'message'     => '(' . $$this->session->userdata('username') . ') has created an album'
            );

            // Add Activity  
            $this->Activity_model->add($data);      

        }

        // Load template
        $this->template->load('public', 'default', 'users/media', $data);


    }

这是应该将数据添加到数据库的模型函数（相当简单）：

public function add_media($data){

        $this->db->insert('ci_posts', $data);
    }

当前输出是这样的：

是正确的Ajax功能，是否有错误或问题来自控制器功能？ media（$ username）或URL本身（与控制器功能相同）

  

http：//localhost/codeigniter/users/media/kirasiris.html

如果有人可以指导我或给我提供更好方法的示例，等等；我将非常感谢。提前致谢。