Question

我们正在开发基于CI框架的社交网络项目。我在网上搜索但感到困惑。如何上传照片，允许用户裁剪照片并使用数据库保存，以便在通话时检索照片？我将此用于个人资料图片。

观看视频：

<?php echo form_open_multipart ('index.php/Main/do_upload'); ?>
<table class="table">
    <tr>
        <td>Title</td>
        <td><?php echo form_input('title'); ?></td>
    </tr>
    <tr>
        <td>Image</td>
        <td><?php echo form_upload('userfile'); ?></td>
    </tr>
    <tr>
        <td></td>
        <td><?php echo form_submit('submit', 'Save', 'class="btn btn-primary"'); ?></td>
        <?php echo form_close(); ?>
    </tr>       
</table>

在控制器上：

public function do_upload()
{
    $config['upload_path']          = './uploads/';
    $config['allowed_types']        = 'gif|jpg|png';
    $config['max_size']             = 100;
    $config['max_width']            = 1024;
    $config['max_height']           = 768;

    $this->load->library('upload', $config);

    if ( ! $this->upload->do_upload('userfile'))
    {
        $error = array('error' => $this->upload->display_errors());

        $this->load->view('Material_view', $error);
    }
    else
    {
        $data = array('upload_data' => $this->upload->data());

        $this->load->view('upload_success', $data);
    }
}

Answer 1

将Bluimp多文件上传（https://blueimp.github.io/jQuery-File-Upload）和Croppr（https://fengyuanchen.github.io/cropperjs/）插件一起使用。在Bluimp中，你可以获得足够的代码（在他们的站点中有一个codeigniter类）来处理codeigniter中的文件上传。

Answer 2

请尝试使用cropper js。我已经使用了它，这很容易，它将满足您的要求

https://github.com/fengyuanchen/cropper

Answer 3

创建图像模型并粘贴代码

<?php 
class Image_model extends CI_Model {
 public function __construct()  {
    parent::__construct();
    $this->load->helper('url');
    $this->load->library('upload');
    $this->load->library('image_lib');
}
public function do_resize($filename)
{

    $source_path =  'uploads/' . $filename;
    $target_path =  'uploads/thumb/thumb_'.$filename;

    $config_manip = array(

        'image_library' => 'gd2',
        'source_image' => $source_path,
        'new_image' => $target_path,
        'maintain_ratio' => TRUE,
        'width' => 150,
        'height' => 150
    );
    $this->image_lib->initialize($config_manip);
    $this->load->library('image_lib', $config_manip);


    if (!$this->image_lib->resize()) {
        echo $this->image_lib->display_errors();
        die();
    }
}

public function img_upload()
{
    $config = array(
        'upload_path' => "uploads",
        'allowed_types' => "*",
        'overwrite' => TRUE,
        'max_size' => "5048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
        'max_height' => "3000",
        'max_width' => "3000"
    );
    $this->upload->initialize($config);
    $this->load->library('upload', $config);

    if($this->upload->do_upload()) {
        $response   =    array('upload_data' => $this->upload->data());
        $this->do_resize($response['upload_data']['file_name']);

    }
    /*else{
        $error              =   array('error'=>$this->upload->display_errors());
        //print_r($error);die(); 

    }*/
  }
}

在控制器中调用此函数

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 class Post extends CI_Controller {
   public function __construct(){
    parent::__construct();
    $this->load->model('image_model');
    }
   public function add() {
       if(isset($_FILES)){
             $config                =   $this->image_model->img_upload();
             $file_data             =   $this->upload->data();
             $data['feature_image'] =   $file_data['file_name'];
            }
   $lat_id      =       $this->your_model->save($data);
 }

使用Codeigniter进行照片上传，裁剪和保存

3 个答案: