Question

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

但是，我希望我的用户能够看到上传的图片，并在必要时进行一些操作（旋转，裁剪 - 我很确定我知道如何做到这一点，所以这不是问题）在提交孔形式之前

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

有按钮＆＃34;上传图片＆＃34;或图片自动上传。（如果有按钮我必须更改上传的验证设置）
图片是动态显示给用户的（有一些想法怎么做但我因为缺少第一步而无法测试它们）
用户进行一些操作
如果用户在提交前退出，我会删除已上传的图片（非常确定我可以处理此图片）

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

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 - 任何能让我走上正轨的东西都会很棒！

Answer 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>

如何在submition表单（CodeIgniter）中立即显示上传的图片？

1 个答案: