如何在提交表单（CodeIgniter）中立即显示上传的图片？答案

【问题标题】：How to display uploaded picture immediately inside submition form (CodeIgniter)?如何在提交表单（CodeIgniter）中立即显示上传的图片？
【发布时间】：2016-10-26 09:30:06
【问题描述】：

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

但是，我希望我的用户能够看到上传的图片，并在必要时进行一些操作（旋转、裁剪 - 我很确定我知道该怎么做，所以这不是这里的问题），然后再提交孔表单.

所需的步骤如下所示：

有“上传图片”按钮或图片自动上传。（如果有按钮，我必须更改上传验证设置）
图片动态显示给用户（有一些想法，但由于缺少第一步，我无法测试它们）
用户做了一些操作
如果用户在提交前退出，我会删除上传的图片（很确定我可以处理这个）

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

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>

抱歉，如果代码在某些地方不干净 - 它在开发过程中。我试图将表单分成两部分，但在控制器代码中真的迷失了。一般的想法，pseidocode - 任何能让我走上正轨的东西都会很棒！

【问题讨论】：

标签： php forms codeigniter

【解决方案1】：

使用 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>

【讨论】：

虽然这很好用，因为如果用户在未提交的情况下退出，我什至不必删除图片，但可能会出现问题。我打算将 CI 图像库与 jQuery JCrop 插件一起使用，但 CI 库需要图像的源路径。使用您的答案意味着我将不得不使用 JCrop 插件来裁剪#imgpreview，但我不确定是否会上传更改。我也可以定位输入吗？
target input是什么意思
我想我不知道在提交表单之前上传图片存储在哪里。我想在 #imgpreview 上执行 jQuery 方法，例如旋转或裁剪。如果我旋转图片，如何确保提交时上传的旋转图片不是原图？