如何在不重置表单的情况下使用Ajax和Codeigniter上传图像？

Question

我只是想使用Ajax和Codeigniter上传图片。 收到错误消息，提示“您未选择要上传的文件”。 即使我没有选择该图像。

我最近尝试了来自许多来源的许多示例，但没有得到我的答案。 在我向您展示我的代码之后，这给出的结果是“您未选择要上传的文件”。 当我已经选择文件时。

这是我的看法：

<div class="col-lg-6">
   <div class="dropify-wrapper mb-4 form-group col-lg-6">
       <div class="dropify-loader"></div>
        <div class="dropify-errors-container">
        <ul></ul>
        </div>
        <input class="dropify" name="userfile" id="input-file-now" type="file">
        <button class="dropify-clear" type="button">Remove</button>
        <div class="dropify-preview">
        <span class="dropify-render"></span>
        <div class="dropify-infos">
        <div class="dropify-infos-inner">
        <p class="dropify-filename"><span class="file-icon"></span>
        <span class="dropify-filename-inner"></span></p>
        <p class="dropify-infos-message">Drag and drop or click to replace</p>
        </div>
        </div>
        </div>
      </div>
    </div>

这是ajax代码：

$('#submit_btn').click(function (e) {
   e.preventDefault();
   var data = $('#formname').serialize();

   $.ajax({
      type: 'ajax',
      method: 'post',
      url: '<?php echo base_url() ?>ControllerName/functionName',
      data: data,
      enctype: 'multipart/form-data',
      async: false,
      dataType: 'json',

      success: function (response) {
         alert(response);
      },

      error: function () {

      }
   });
});

这是控制器代码：

public function functionName()
{
    $config=[
      'upload_path'=>'./Assets/imgs/users/',
      'allowed_types'=>'jpg|png|gif' 
    ];       
    $this->load->library('upload',$config);
    if($this->upload->do_upload(')){
        $data=$this->upload->data();
        $image_path= base_url("Assets/imgs/users/".$data['raw_name'].$data['file_ext']);
        $result= $image_path;
    }else{
        $result=$this->upload->display_errors('','');
    }
}

Answer 1

请在您的html中添加标签，并在jquery代码中使用formdata，如下所示。

HTML代码：

<form id="form" method="post" enctype="multipart/form-data">
</form>

jQuery代码：

  data:  new FormData(formid),