如何在提交表单(CodeIgniter)中立即显示上传的图片 - How to display uploaded picture immediately inside submition form (CodeIgniter)?

我想创建表单，用户可以在其中添加产品到数据库。他们必须上传图片并从选择框中选择几个选项。到目前为止，我的控制器和视图都工作得很好——我验证了上传和选择框，如果出现错误，设置选择框的值。

然而，我希望我的用户能够看到上传的图片，并在必要时做一些操作(旋转，裁剪-我很确定我知道如何做到这一点，所以这不是这里的问题)，然后提交洞形式。

所需的步骤看起来像这样:

有"上传图片"按钮或图片自动上传。(如果有按钮，我必须更改上传的验证设置)
图片动态显示给用户(有一些想法如何做到这一点，但我不能测试他们，因为缺少第一步)
用户做一些操作
如果用户在提交之前退出，我会删除上传的图片(非常确定我可以处理这个)

这是我到目前为止的代码控制器:

public function create()
        {
            $this->load->helper(array('form', 'url'));
            $this->load->library('form_validation');
            $this->form_validation->set_rules('health', 'Health', 'required');
            $this->form_validation->set_rules('manufacturer', 'Manufacturer', 'required');
            if (empty($_FILES['product']['name']))
            {
                $this->form_validation->set_rules('product', 'Document', 'required');
            }
            $data['manufacturer'] = $this->input->get('manufacturer');
            if ($this->form_validation->run() === FALSE)
            {
                $data['head'] = $this->load->view('templates/head', NULL, TRUE);
                $data['navmenu'] = $this->load->view('templates/navmenu', NULL, TRUE);
                $this->load->view('products/create', $data);
            }
            else
            {
                $user_id = $this->tank_auth->get_user_id();
                $config['upload_path']          = './uploads/';
                $config['allowed_types']        = 'gif|jpg|png';
                $config['file_name']            = $user_id;
                $config['max_size']             = 100;
                $config['max_width']            = 1024;
                $config['max_height']           = 768;
                $this->load->library('upload', $config);
                if ( ! $this->upload->do_upload('product'))
                {
                        $error = array('error' => $this->upload->display_errors());
                        $this->load->view('products/create', $error);
                }
                else
                {
                        $this->products_model->set_products();
                        $id = $this->db->insert_id();
                        $image_data = $this->upload->data();
                        $image['image_url'] = $image_data['file_name'];
                        $this->db->where ('product_id', $id);
                        $this->db->update('products', $image);
                        $this->load->view('products/success');
                }
            }
        }

和观点:

<html>
        <head>
                <?=$head?>
        </head>
        <body>
                <?=$navmenu?>
<?php echo form_open_multipart('products/create'); ?>
    <input type="file" name="product" size="20" />
    <?php echo form_error('product'); ?><br />
    <br /><br />
    <label for="health">Health</label>
    <select name="health">
        <option disabled selected value> -- select a health option -- </option>
        <option value="new">New</option>
        <option value="used">Used</option>
    </select>
    <?php echo form_error('health'); ?><br />
    <label for="manufacturer">Manufacturer</label>
    <select name="manufacturer" >
        <option disabled selected value> -- select an manufacturer -- </option>
        <option value="manufacturer1" <?php echo set_select('manufacturer','manufacturer1', ( !empty($manufacturer) && $manufacturer == "manufacturer1" ? TRUE : FALSE )); ?> >Manufacturer1</option>
        <option value="manufacturer2" <?php echo set_select('manufacturer','manufacturer2', ( !empty($manufacturer) && $manufacturer == "manufacturer2" ? TRUE : FALSE )); ?> >Manufacturer2</option>
        <option value="manufacturer3" <?php echo set_select('manufacturer','manufacturer3', ( !empty($manufacturer) && $manufacturer == "manufacturer3" ? TRUE : FALSE )); ?> >Manufacturer3</option>
        <option value="manufacturer4" <?php echo set_select('manufacturer','manufacturer4', ( !empty($manufacturer) && $manufacturer == "manufacturer4" ? TRUE : FALSE )); ?> >Manufacturer4</option>
    </select>
    <?php echo form_error('manufacturer'); ?><br />
    <input type="submit" name="submit" value="Create product item" />
</form>

抱歉如果代码在某些地方不干净-它在开发过程中。我曾试图将形式分成两个，但真的失去了控制器代码。总的想法，伪码-任何能让我走上正轨的东西都会很棒!

使用Jquery实现

function ShowImage(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#imgpreview').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
}
}
$("#imgupload").change(function(){
    ShowImage(this);
});

HTML

<form>
    <input type='file' id="imgupload" />
    <img id="imgpreview" src="#" alt="your image" />
</form>