在 CodeIgniter 中使用 Jquery.fileupload.js 上传文件 - 我找不到我的错误

Question

The issue is I can't upload file to the folder but the file name is storing in DB. I am getting an image if I copy and paste an image to the folder but I can't able to upload while update or add an image.

I not good in jQuery. Also, this project using Jquery.file upload plugin which I really don't know.

product-edit.php

  <div class="col-sm-6">
        <table id="files" class="files">
          <tr>
              <td>
              <div class="col-sm-12 text-center">
                  <img style="width: 300px; height: 200px;"  src="<?= base_url() ?>userfiles/product/<?php echo $product['image'] . '?c=' . rand(1, 9999) ?>"/>
                  </div>
                  <div class="col-sm-12 my-2" > <?php echo $product['image'] ?> </div>
                  <div class="col-sm-12 my-2" >
                    <a class="btn-danger btn-sm px-1 " data-url="<?= base_url() ?>products/file_handling?op=delete&name=<?php echo $product['image'] ?>" class="aj_delete">
                    <i class="fa fa-trash mx-1  "></i>Delete Image</a>
                 </div>
            </td>
          </tr>
       </table>
     </div>
     <div class="col-sm-6">
         <span class="btn btn-success fileinput-button">
             <i class="glyphicon glyphicon-plus"></i>
               <span class="my-2">Select files...</span>
     <!-- The file input field used as target for the file upload widget -->
                   <input id="fileupload" type="file" name="files[]">
               </span>
               <div class="my-1">
                   <q>Allowed: gif, jpeg, png</q>
               </div>
               <!-- The global progress bar -->
               <div id="progress" class="progress">
                   <div class="progress-bar progress-bar-success"></div>
               </div>
             </div>
           </div>

jQuery

<script src="<?php echo assets_url('assets/myjs/jquery.ui.widget.js'); $invoice['tid'] = 0; ?>"></script>
<script src="<?php echo assets_url('assets/myjs/jquery.fileupload.js') ?>"></script>

$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = '<?php echo base_url() ?>products/file_handling?id=<?php echo $product['pid'] ?>';
   $('#fileupload').fileupload({
      url: url,
      dataType: 'json',
      formData: {'<?=$this->security->get_csrf_token_name()?>': crsf_hash},
      done: function (e, data) {
      var img = 'default.png';

      $.each(data.result.files, function (index, file) {

      $('#files').html('<tr><td><a data-url="<?php echo base_url() ?>products/file_handling?op=delete&name=' + file.name + '" class="aj_delete"><i class="btn-danger btn-sm icon-trash-a"></i> ' + file.name + ' </a><img style="max-height:200px;" src="<?php echo base_url() ?>userfiles/product/' + file.name + '"></td></tr>');

      img = file.name;
     });

     $('#image').val(img);
        },
     progressall: function (e, data) {
       var progress = parseInt(data.loaded / data.total * 100, 10);
         $('#progress .progress-bar').css(
           'width',
           progress + '%'
          );
      }
   }).prop('disabled', !$.support.fileInput)
   .parent().addClass($.support.fileInput ? undefined : 'disabled');
 });

Here the controller method for upload file to the folder

Products.php

public function file_handling()
    {

        if ($this->input->get('op')) {
            $name = $this->input->get('name');
            if ($this->products->meta_delete($name)) {
                echo json_encode(array('status' => 'Success'));
            }
        } else {
            $id = $this->input->get('id');
            $this->load->library("Uploadhandler_generic", array(
                'accept_file_types' => '/\.(gif|jpe?g|png)$/i', 'max_file_size' => 2048, 'upload_dir' => FCPATH . 'userfiles/product/', 'upload_url' => base_url() . 'userfiles/product/'
            ));
        }
    }

Answer 1

The problem is you are loading the upload library config but are not actually processing the upload.

After this, which loads the upload library wih your configuration:

$this->load->library("Uploadhandler_generic", array(
                'accept_file_types' => '/\.(gif|jpe?g|png)$/i', 'max_file_size' => 2048, 'upload_dir' => FCPATH . 'userfiles/product/', 'upload_url' => base_url() . 'userfiles/product/'
            ));

You need to actually process the upload:

if (!$this->upload->do_upload('userfile'))
{
  // do something if the upload processing fails. You can output the errors using $this->upload->display_errors()
}

else
{
  // do something if the upload is successful
  // upload data will be stored in $this->upload->data()
}

By doing this, Codeigniter will take the file from your server's tmp directory and do with it what you want (such as moving it to its destination). Change userfile for the name of the file field.

Please note that if you need to process multiple files at once you'll need to loop through all files (which means a little tweaking on the above code)