使用codeigniter上传带缩略图预览的照片

Question

如何在我上传我的个人资料照片图像的注册表格中，在点击注册之前，我想要使用CI设置为个人资料图片的图像预览

这是我的注册表单代码

register_model.php

<?php

class Register_model extends CI_Model

{
function create_user($photo_name)
{
    $new_user_insert_data = array(
        'id' => '',
        'email' => $this->input->post('email'),
        'password' => md5($this->input->post('password')),
        'name' => $this->input->post('name'),
        'major' => $this->input->post('user_major'),
        'year' => $this->input->post('user_year'),
        'bio' => $this->input->post('bio'),
        'profpic' => $photo_name,
        'insta' => $this->input->post('instagram'),
        'twitter' => $this->input->post('twitter'),
        'facebook' => $this->input->post('facebook'),
        'vote_count' => '10',
        'vote' => '0',
        'gender' => $this->input->post('gender'),
       );

    $insert = $this->db->insert('user', $new_user_insert_data);
    return $insert;
}
}

?>

这是视图

register.php

<div class="margin-top-87">
<div class="container">
<h1>Register</h1>
<hr>
<div class="row">
  <!-- left column -->
  <div class="col-md-3">
    <div class="text-center">
      <img src="//placehold.it/100" class="avatar img-circle" alt="avatar">
      <?php
      if(!empty($_FILES['userfile'])){
            $name_array = array();
            $count = count($_FILES['userfile']['size']);
            foreach($_FILES as $key => $value)
                for ($s=0; $s<=$count-1; $s++)
                {
                    //Original Image Upload - Start
                    $_FILES['userfile']['name'] = $value['name'][$s];
                    $_FILES['userfile']['type'] = $value['type'][$s];
                    $_FILES['userfile']['tmp_name'] = $value['tmp_name'][$s];
                    $_FILES['userfile']['error'] = $value['error'][$s];
                    $_FILES['userfile']['size'] = $value['size'][$s];
                    $config['upload_path'] = './public/images/campaign-images/';
                    $config['allowed_types'] = 'gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG';
                    $config['max_size'] = '10000';
                    //$config['max_width'] = '1024';
                    //$config['max_height'] = '768';
                    $CI->load->library('upload', $config);
                    $CI->upload->do_upload();
                    $data = $CI->upload->data();
                    //Original Image Upload - End

                    //Thumbnail Image Upload - Start
                    $config['image_library'] = 'gd2';
                    $config['source_image'] = './public/images/campaign-images/'. $value['name'][$s];
                    $config['new_image'] = './public/images/campaign-images/thumbs/'.$value['name'][$s];
                    $config['width'] = 350;
                    $config['height'] = 250;

                    //load resize library
                    $this->load->library('image_lib', $config);
                    $this->image_lib->resize();
                    //Thumbnail Image Upload - End

                    $name_array[] = $data['file_name'];
                }
            return $name_array;
        }
        ?>
      <h6>Please use real photo, not an avatar</h6>
      <?php 
        $data= array
            (
              'name' => 'userfile',
              'type' => 'file',
              'class' => 'form-control',
              'id' => 'form_register'
            );
        echo form_upload($data);
      ?>

    </div>
  </div>

  <!-- edit form column -->
  <div class="col-md-9 personal-info">
    <div class="alert alert-info fade in">

      <strong>Info!</strong>&nbsp;Please fill with real information of yours.
    </div>
    <?php
    if(validation_errors('<p class="error">'!=""))
    {?>
        <div class="alert alert-danger fade in">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          <strong>Attention!</strong>&nbsp;<?php echo validation_errors('<p class="error">') ?>
        </div><?php
    }?>

    <h3>Personal info</h3>
    <?php $attributes = array('class' => 'form-horizontal', 'role' => 'form', 'id' => 'form_register'); echo form_open('index/create_user',$attributes); ?>
      <div class="form-group">
        <label class="col-lg-3 control-label">UC Student email :</label>
          <div class="col-lg-8">
          <?php 
            $data= array
                (
                  'name' => 'email',
                  'placeholder' => 'Ciputra student email. Example : email@student.ciputra.ac.id',
                  'type' => 'email',
                  'class' => 'form-control',
                  'required' => 'required'
                );
            echo form_input($data);
          ?>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Name :</label>
        <div class="col-lg-8">
        <?php 
          $data= array
              (
                'name' => 'name',
                'placeholder' => 'Full name. Example : Front Middle Last',
                'type' => 'text',
                'class' => 'form-control',
                'required' => 'required'
              );
          echo form_input($data);
        ?>
        </div>      
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Gender :</label>
        <div class="col-lg-8">
          <div class="ui-select">
          <?php
            $options = array
                (
                  '' => 'Gender',
                  'Man' => 'Man',
                  'Woman' => 'Woman'
                );
            echo form_dropdown('gender', $options, '', 'class="form-control"');
          ?>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Major :</label>
        <div class="col-lg-8">
          <div class="ui-select">
          <?php
            $options = array
                (
                  '' => 'Insert your major',
                  'CB' => 'CB',
                  'FDB' => 'FDB',
                  'IBM-IC' => 'IBM-IC',
                  'IBM-RC' => 'IBM-RC',
                  'IBA' => 'IBA',
                  'IHTB' => 'IHTB',
                  'IMT' => 'IMT',
                  'INA' => 'INA',
                  'MCM' => 'MCM',
                  'MIS' => 'MIS',
                  'PSY' => 'PSY',
                  'VCD' => 'VCD'
                );
            echo form_dropdown('user_major', $options, '', 'class="form-control"');
          ?>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Year :</label>
        <div class="col-lg-8">
          <div class="ui-select">
          <?php
            $options = array('' => 'Year joined UC');
            for ($i = date('Y'); $i >= 2006; $i--)
            {
              $options[$i] = $i;
            }
            echo form_dropdown('user_year', $options, '', 'class="form-control"');
          ?>
          </div>
        </div>
      </div>      
      <div class="form-group">
        <label class="col-md-3 control-label">Password :</label>
        <div class="col-md-8">
        <?php 
          $data= array
              (
                'name' => 'password',
                'placeholder' => 'Password',
                'type' => 'password',
                'class' => 'form-control',
                'required' => 'required',
                'maxlength' => '15'
              );
          echo form_password($data);
        ?>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">Confirm password :</label>
        <div class="col-md-8">
        <?php 
          $data= array
              (
                'name' => 'cpassword',
                'placeholder' => 'Confirm Password',
                'type' => 'password',
                'class' => 'form-control',
                'required' => 'required',
                'maxlength' => '15'
              );
          echo form_password($data);
        ?>
        </div>
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Short Bio :</label>
        <div class="col-lg-8">
        <?php 
          $data= array
              (
                'name' => 'bio',
                'placeholder' => 'Short bio (max 128 character)',
                'type' => 'text',
                'class' => 'form-control',
                'maxlength' => '128',
                'rows' => '3'
              );
          echo form_textarea($data);
        ?>
        </div>         
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Facebook :</label>
        <div class="col-lg-8">
        <?php 
          $data= array
              (
                'name' => 'facebook',
                'placeholder' => 'Facebook Profile link. Example : facebook.com/name',
                'type' => 'url',
                'class' => 'form-control',
              );
          echo form_input($data);
        ?>
        </div>         
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Twitter :</label>
        <div class="col-lg-8">
        <?php 
          $data= array
              (
                'name' => 'twitter',
                'placeholder' => 'Twitter Profile link. Example : @name',
                'type' => 'url',
                'class' => 'form-control',
              );
          echo form_input($data);
        ?>
        </div>         
      </div>
      <div class="form-group">
        <label class="col-lg-3 control-label">Instagram :</label>
        <div class="col-lg-8">
        <?php 
          $data= array
              (
                'name' => 'instagram',
                'placeholder' => 'Instagram Profile link. Example : @name',
                'type' => 'url',
                'class' => 'form-control',
              );
          echo form_input($data);
        ?>
        </div>         
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label"></label>
        <div class="col-md-8">
          <?php 
            $data= array
                (
                  'name' => 'register',
                  'value' => 'Register',
                  'type' => 'submit',
                  'class' => 'btn btn-primary',
                );
            echo form_submit($data);
          ?> 
          <span></span>
          <?php 
            $data= array
                (
                  'name' => 'reset',
                  'value' => 'Clear',
                  'type' => 'reset',
                  'class' => 'btn btn-default',
                );
            echo form_reset($data);
          ?> 
        </div>
      </div>
    </form>
    <?php echo form_close(); ?>
  </div>
  </div>
</div>
<hr>
</div>

Answer 1

上传前的预览＆＃34;是一个javascript技巧，将本地文件加载到<img>源。其余的是简单的文件上传，您可以在其中检查文件类型，大小，分辨率等。

以下是您的回答：Preview an image before it is uploaded