投稿フォーム（CodeIgniter）のすぐ上にアップロードされた画像を表示するには？

ユーザーがデータベースに製品を追加できるフォームを作成したい。彼らは画像をアップロードし、選択ボックスからいくつかのオプションを選択する必要があります。これまでのところ、私はコントローラとビューを正常に動作させています。アップロードと選択ボックスの両方を検証し、エラーが発生した場合はボックスを選択するように値を設定します。投稿フォーム（CodeIgniter）のすぐ上にアップロードされた画像を表示するには？

しかし、私は、アップロードされた画像を見て、必要ならば何か操作をしたいと思っています（回転、切り抜き - これを行う方法はわかっていますので、ここで問題にならないと確信しています）形。

ボタン「アップロード画像」OR写真は自動的にアップロードされますがあります：

希望の手順は、次のようになります。（ボタンがある場合、アップロード用の検証設定を変更する必要があります）
画像はユーザーに動的に表示されます（最初の手順がないためにいくつかのアイデアがありますが、最初の手順がないためテストできません）
ユーザーは何らかの操作を行います
ここで私は、アップロードされた画像を削除し提出する前に、ユーザー出口（私はこの1つを処理することができますかなり確信して）

は私のコードは、これまでコントローラの場合：

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>

申し訳ありませんが、コードはいくつかの場所で汚れている場合 - 開発procesesでそれ `s。フォームを2つに分割しようとしましたが、コントローラのコードでは本当に失われました。一般的なアイデアは、pseidocode - 私は正しいトラックに私を得るだろう素晴らしいだろう！

出典

2016-10-26 Kārlis Janisels

私も、ユーザーが終了した場合に問題がある可能性があります送信せずに画像を削除する必要はありませんので、これは素晴らしい作品ながら

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

出典

2016-10-26 09:36:52 mahethekiller

をすることができません。私はjQuery JCropプラグインと一緒にCIイメージライブラリを使用しようとしましたが、CIライブラリにはイメージのソースパスが必要です。あなたの答えを使用すると、私は#imgpreviewをトリミングするためにJCropプラグインを使用する必要がありますが、変更がアップロードされるかどうかはわかりません。入力をターゲットにすることはできますか？ –

'ターゲット入力 'とはどういう意味ですか？ – mahethekiller

フォームを送信する前に画像をアップロードする場所がありません。 #imgpreviewで回転や切り抜きのようなjQueryメソッドを実行したい。画像を回転すると、元の画像ではなく回転した画像をアップロードする方法を教えてください。 –

投稿フォーム（CodeIgniter）のすぐ上にアップロードされた画像を表示するには？

答えて

関連する問題