javascript - ask about jquery upload multiple image -

i want upload image preview after use jquery dropzone.

at first if 1 image uploaded using dropzone image shows , unique name givin using date+rndom number.

that's first way,

the second way, want add 1 image , give , unique name too,have save in database too. when second image being uploaded, replaces first image

is there way it

======================================================================

this the script execute multiple upload images, place on view: header.php. made same function other dropzone function in header.php. replace div tag id , input tag in view

<script type="text/javascript"> $(function() {   var name = date.now();   var key = math.floor((math.random() * 99999999999) + 1);   var unique = name+'-'+key;    $("div#eyedropzone").dropzone({        url:'http://localhost/work/uploadimage/multiple/'+unique,         paramname:'foto', // param upload image name db        uploadmultiple:false,        maxfiles:2,         acceptedfiles: '.jpg',        maxfilesize:1,        addremovelinks: 'no',        dictfiletoobig: "file size ({{filesize}}mb). max file size: {{maxfilesize}}mb.",        dictinvalidfiletype: "jpg only",         init: function() {         this.on("maxfilesexceeded", function(file) {         this.removeallfiles();         this.addfile(file);          });         this.on("removedfile", function(file, xhr, formdata) {         $("#filename").val('');          });        },        accept: function(file, done) {         var filename = file.name;         $("#filename").val(unik);         done();         }   }); }); </script> 

this controller, code developed friend. need change little, @ first upload image folder first using jquery dropzone , delete image folder insert database save image folder.

public function birthday_upload($unique='') {   error_reporting(0);   $this->form_validation->set_error_delimiters('<div style="border: 1px solid: #999999; background-color: #ffff99;">', '</div>');    $config['image_library'] = 'gd2';   $original_path                     = './birthday/original';   $resized_path                      = './birthday/resized';   $thumbs_path                       = './birthday/thumb';   $this->load->library('image_lib', $config);    unlink('./birthday/original/'.$uniks.'.jpg');   unlink('./birthday/resized/'.$uniks.'.jpg');   unlink('./birthday/thumb/'.$uniks.'.jpg');    $config = array(           'allowed_types'   => 'jpg|jpeg',           'max_size'        => 1024,           'upload_path'     => $original_path, //upload directory           'file_name'       => $uniks,           );    $gambar['filename'] = $uniks;   $this->load->library('upload', $config);   $this->upload->do_upload('foto');   $image_data = $this->upload->data(); //upload image   $image['foto'] = $image_data['file_name'];    //your desired config resize() function   $config = array(           'source_image'     => $image_data['full_path'], //path uploaded image           'new_image'        => $resized_path,           'maintain_ratio'   => false,           'width'            => 566,           'height'           => 238           );    $this->image_lib->initialize($config);   $this->image_lib->resize();    // thumbnail image   $config = array(           'source_image'         => $image_data['full_path'],           'new_image'            => $thumbs_path,           'maintain_ratio'       => true,           'width'                => 100,           'height'               => 100           );    //here second thumbnail, notice call initialize() function again   $this->image_lib->initialize($config);    $this->birthday_m->simpan($gambar);  } 

this how insert image

public function simpan($gambar) {   error_reporting(0);    $name_fb              = mysql_real_escape_string($this->input->post('name'));   $gender_fb            = mysql_real_escape_string($this->input->post('gender'));   $tempat_lahir_fb  = mysql_real_escape_string($this->input->post('pob_child'));   $child_birth_fb   = mysql_real_escape_string($this->input->post('birth_child'));   $email_fb                 = mysql_real_escape_string($this->input->post('email'));   $address_fb           = mysql_real_escape_string($this->input->post('address'));   $nama_anak_fb         = mysql_real_escape_string($this->input->post('child_name'));   $filename_fb          = mysql_real_escape_string($this->input->post('foto_name').'.jpg');   // add line below save image name database   $akta_fb                  = mysql_real_escape_string($this->input->post('akta_name').'.jpg');    $data= array(     'name_fbd'                  => $name_fb,     'email_fbd'                 => $email_fb,     'address_fbd'           => $address_fb,     'nama_anak_fbd'         => $nama_anak_fb,     'tempat_lahir_fbd'  => $tempat_lahir_fb,     'child_birth_fbd'       => $child_birth_fb,     'filename_fbd'          => $filename_fb,     'filename_akta'         => $akta_fb,     'gender_fbd'            => $gender_fb,     'dateregister_fbd'  => $now,     'voucher_fbd'           => $voucher,     'handphone_fbd'         => $handphones,     // 'dateupdate'     => ''   );     $this->db->insert('mydatabase',$data);   {     redirect(''.base_url().'birthdays/success/');   } } 

this view, made other dropzone function new dropzone area upload image, success show image in dropzone area,but first image replace second image. , filaname show 1 below dropzone area.

<div class="dropzone" id="my-awesome-dropzone">   <div id="eyedropzone" class="dropzone" ></div>   <input multiple  name="foto_name" type="text" id="filename"  required readonly />  </div> <div class="dropzone" id="my-awesome-dropzone">   <div id="eyedropzone" class="dropzone" ></div>   <input multiple  name="akta_name" type="text" id="filenameakta"  required readonly/> </div> 

i presume want upload multiple files. can set maxfile limit in dropzone options

when ever user tries exceed limit, event maxfilesexceeded triggered , can perform validation right there.

    dropzone.options.mydropzone = {             maxfiles: 2,       init: function() {     this.on("maxfilesexceeded", function(file){         alert("no more files can uploaded!");     });   }     } 

if not solve problem, please provide error messages if recieving any.