使用AJAX和Codeigniter上傳多個文件

Question

嗨，我嘗試使用ajax和codeigniter上傳多個圖像。我是新來的AJAX和jQuery所以請幫助我理解我在做什麼錯誤或沒有做

這裏是我的控制器代碼和上傳功能：

private function setup_upload_option() 
{ 
    $config = array(); 
    $config['upload_path'] = './data/images/gallery_images'; 
    $config['allowed_types'] = 'jpg|png|gif'; 
    $config['encrypt_name'] = TRUE; 
    $config['overwrite'] = FALSE; 
    return $config; 
} 

function upload() 
{ 
    $this->check_is_validated(); 
    $data['error'] = array('error' => ''); 
    $files = $_FILES; 

    $id = $this->input->post('galleryID'); 

    if ($_POST) { 

     $count = count($_FILES['userfile']['name']); 
     for ($i = 0; $i < $count; $i++) { 
      $_FILES['userfile']['name'] = $files['userfile']['name'][$i]; 
      $_FILES['userfile']['type'] = $files['userfile']['type'][$i]; 
      $_FILES['userfile']['tmp_name'] = $files['userfile']['tmp_name'][$i]; 
      $_FILES['userfile']['size'] = $files['userfile']['size'][$i]; 
      $_FILES['userfile']['error'] = $files['userfile']['error'][$i]; 

      $this->upload->initialize($this->setup_upload_option()); 
      if ($this->upload->do_upload() == FALSE) { 
       $data['error'] = $this->upload->display_errors(); 
       $data['title'] = 'Create a New Property'; 
       $data['content'] = 'admin' . '/gallery'; 
       $this->load->view('templates/dashboard/template', $data); 
      } else { 
       $upload_data = $this->upload->data(); 
       $data = array(
        'gallery_id' => $id, 
        'image_name' => $upload_data['file_name'], 
        'image_size' => $upload_data['file_size'], 
        'image_ext' => $upload_data['file_ext'], 
        'full_path' => $upload_data['file_path'] 
       ); 
       $this->db->insert('gallery_images', $data); 
      } 
     } 
    } 
} 

這是我與AJAX和jQuery視圖文件：

<div class="modal fade" role="dialog" id="modalUpload"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title"></h4> 
      </div> 
      <div class="modal-body"> 
       <?php echo form_open_multipart('gallery/upload', array('id' => 'galleryImages')) ?> 
       <div class="form-group"> 
        <label for="gallery">Please select which gallery to upload to:</label> 
        <select class="form-control" name="galleryID"> 
         <option value="0"></option> 
         <?php foreach ($gallery as $item) { ?> 
          <option value="<?= $item['ID'] ?>"><?= $item['gallery_name']; ?></option> 
         <?php } ?> 
        </select> 
       </div> 
       <div class="form-group"> 
        <label for="images">Please select some images for upload!</label> 
        <input type="file" name="file[]" class="form-control" id="file" multiple/> 
       </div> 
       <?php echo form_close(); ?> 
      </div> 
      <script> 
       function doUpload() { 

        var form_data = { 
         $('#galleryID').val(); 
       } 

        $.ajax({ 
         url: '<?php echo base_url(). 'gallery/upload'?>', 
         type: 'POST', 
         data: form_data, 
         success: function (data) { 
          $('#modalUpload').modal('hide'); // hide the modal 
          $('#galleryImages')[0].reset(); // reset form on modals 
          $('#galimg').load('<?=base_url();?>' + "#galimg"); // reload the view 
         }); 
       } 
       } 
      </script> 
      <div class="modal-footer"> 
       <button type="button" style="margin-left: 10px;" class="btn btn-success pull-right" 
         onclick="doUpload()"><i class="fa fa-upload"></i> Upload Images 
       </button> 
       <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times">&nbsp;</i>Close 
       </button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

我的問題是如何將選定的文件通過jquery傳遞到控制器上傳到數據庫中？

Answer 1

你好，你可以使用懸浮窗也很容易上傳多個圖像集懸浮窗在您看來，它的JavaScript代碼看起來像這樣

var myDropzone = new Dropzone({ 
         url: "URL", 
         paramName: "Image", 
         uploadMultiple: true, 

         parallelUploads: 1, 
         addRemoveLinks: true, 
         autoDiscover: false, 
         dataType: "json", 
         removedfile: function (file) { 

         }, 
         init: function() { 

         }, 
        }); 

在你的控制器，你得到的圖像的排列，使用簡單的圖片上傳功能

http://dropzonejs.com/