php - How to display uploaded picture immediately inside submition form (CodeIgniter)? -


i want create form users can add products database. have upload picture , choose couple of options select boxes. far have controller , view working fine - validate both upload , select boxes, set values select boxes if error accoured.

however, want users able see uploaded picture , manipulations if necessary (rotate, crop - pretty sure know how not question here) before submitting hole form.

the desired steps this:

  1. there button "upload picture" or picture gets uploaded automatically. (if there button have change validation settings upload)
  2. picture dynamically displayed user ( have ideas how can not test them because of missing first step)
  3. user manipulation
  4. if user exits before submitting delete uploaded picture (pretty sure can handle one)

here code far controller:

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');                 }             }         }

and view:

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

sorry if code unclean in places - it`s in development proceses. have tried split form 2 lost in controllers code. general idea, pseidocode - me on right track great!

use jquery this

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>

-

Comments

Post a Comment

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

Image
i'm using qt framework build graphical user interface. use qgridlayout position qwidgets neatly. gui looks this: my application regularly adds new widgets gui @ runtime. these new widgets not added @ end of qlayout, somewhere in middle. the procedure bit cumbersome. applied on figure above, need take out widg_c , widg_d , ... qgridlayout. next, add widg_x and widg_y , , put other widgets again. how remove widgets qgridlayout: for in reversed(range(mygridlayout.count())): self.itemat(i).widget().setparent(none) ### as long you're dealing small amount of widgets, procedure not disaster. in application display lot of small widgets - perhaps 50 or more! application freezes second while procedure ongoing, annoying user. there way insert widgets somewhere in qlayout, without need take out other widgets? edit: apparently solution qvboxlayout simple. use function insertwidget(..) instead of addwidget(..) . docs can found link: http://doc.qt.io/qt-5/qboxlayou
Read more

python - serve multiple gunicorn django instances under nginx ubuntu -

i need serve 2 webs apps (django) on gunicorn under different domain names using nginx on ubuntu. started using tutorial: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04 it worked fine 1 using that. tried same thing second gives me 502 gateway second domain. tried following tutorial: http://michal.karzynski.pl/blog/2013/10/29/serving-multiple-django-applications-with-nginx-gunicorn-supervisor/ i'm @ part run gunicorn start script: sudo bin/gunicorn_start i response: starting webuildblack root traceback (most recent call last): file "/home/devin/webuildblack/bin/gunicorn", line 7, in <module> gunicorn.app.wsgiapp import run importerror: no module named 'gunicorn.app'; 'gunicorn' not package you have named program gunicorn.py gunicorn -package. rename file , remove gunicorn.pyc file.
Read more

module - Prestashop displayPaymentReturn hook url -

i new prestashop developer , trying create paymentmodule. have got show payment method can not proceed purchase because not know hot works. does know should redirect run hooddisplaypaymentreturn method? i happy if explain me complete navigation map make purchase. anyway, can find relation between hooks , pages? when have new module payment rely on simplest provided prestashop: bankwire. inside can find 3 hooks. hookpayment: public function hookpayment($params) { if (!$this->active) return; if (!$this->checkcurrency($params['cart'])) return; $this->smarty->assign(array( 'this_path' => $this->_path, 'this_path_bw' => $this->_path, 'this_path_ssl' => tools::getshopdomainssl(true, true).__ps_base_uri__.'modules/'.$this->name.'/' )); return $this->display(__file__, 'payment.tpl'); } hookdisplaypaymenteu: public fun
Read more