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

Question

问题是我无法将文件上传到文件夹，但文件名存储在数据库中。如果我将图像复制并粘贴到文件夹中，我会得到一张图像，但我无法在更新或添加图像时上传。

我不擅长 jQuery。另外，这个项目使用了我真的不知道的 Jquery.file 上传插件。

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

这里是上传文件到文件夹的控制器方法

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

问题是您正在加载上传库配置，但实际上并未处理上传。

之后，它会根据您的配置加载上传库：

$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/'
            ));

您需要实际处理上传：

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()
}

通过这样做，Codeigniter 将从您服务器的 tmp 目录中获取文件，并按照您的意愿处理它（例如将其移动到目标位置）。更改 userfile 为文件字段的名称。

请注意，如果您需要一次处理多个文件，则需要遍历所有文件（这意味着对上述代码进行一些调整）