无法使用ajax上传文件

Question

我正在尝试使用 ajax 上传表单数据，但问题是我无法上传图像/文件。

表格代码

<form class="form-inline" id="form_add"  enctype="multipart/form-data"> 
  <input type="file" id="file-input" name="file-input"  accept="image/*" >

  <input type="text" class="form-control name" id="fname" placeholder="First Name" >                            
  <select class="location" id="location" >
    <option value="">Location</option>
    <?php foreach($location as $loc): ?>
      <option value="<?php echo $loc->city.', '.$loc->state;?>" ><?php echo $loc->city.', '.$loc->state;?></option>
    <?php endforeach; ?>
  </select>
  <button type="submit" class="save_btn"  id="submit" > <img src="save.png" class="Save">   </button>
</form>

脚本代码

<script>
  $("#submit").click(function()
    {
      event.preventDefault();
      var filename = $('input[type=file]').val();
      var fname = $("#fname").val();
      var location = $("#location").val();
      if(filename != "" || fname != "" || location != "")
            {
              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: {
                        filename : filename,
                        fname:fname,
                        location:location
                      },
                cache: false,
                success: function(result){
                  console.log(result);
                }});
            }
    });
</script>

后端代码

$ImageFile = $this->input->post('filename');
$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

if (!$this->upload->do_upload('ImageFile')) 
    {
     $error1 = array('error' => $this->upload->display_errors());
     print_r($error1);
    }
else
    {
      $data1 = $this->upload->data();
      echo $data1['file_name'];
    }

在后端代码中，我将 $ImageFile 的值设为 C:\fakepath\pic.jpg 但文件未上传，错误提示

您没有选择要上传的文件

谁能告诉我如何上传文件

Answer 1

我注意到的几件事

var filename = $('input[type=file]').val() 

没有;

您可以尝试添加以下字段吗：

 $.ajax({
            type: "POST",
            url: "Data/add_data",
            data: {
                    filename : filename,
                    fname:fname,
                    location:location
                  },

            contentType: false,
            processData: false,
            cache: false,
            success: function(result){
              console.log(result);
            }});
        }

因为它可能与 contentType 有关。也可能是$this->upload->do_upload 函数，可能是您没有正确保存文件。但是您没有为此提供代码。

Answer 2

尝试下面的代码并在 ajax 代码中做一些更改。在代码中添加以下参数。

processData: false, contentType: false,

并在 ajax 开始之前添加 var formData = new FormData($("#form_add")[0]); 行。

或检查下面的代码并根据您的代码进行更改。

$("#submit").click(function(){
    event.preventDefault();
    var filename = $('input[type=file]').val();
    var fname = $("#fname").val();
    var location = $("#location").val();
    var formData = new FormData($("#addad")[0]);
    if(filename != "" || fname != "" || location != ""){
        $.ajax({
            type: "POST",
            url: "Data/add_data",
            data:formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function(result){
                  console.log(result);
            }
        });
    }
});

Answer 3

$("#submit").click(function ()
{
    event.preventDefault();
    var filename = $('input[type=file]').val();
    var fname = $("#fname").val();
    var location = $("#location").val();


    if (filename != "" || fname != "" || location != "")
    {
        var formData = new FormData();
        formData.append('filename', $('input[type=file]')[0].files[0]);
        formData.append('fname', fname);
        formData.append('location', location);
        $.ajax({
            type: "POST",
            url: "Data/add_data",
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (result) {
                console.log(result);
            }});
    }
});

Answer 4

您好，您需要序列化表单

<script>
  $("#submit").click(function()
    {
      event.preventDefault();

              $.ajax({
                type: "POST",
                url: "Data/add_data",
                data: $('#form_add').serialize(),
                cache: false,
                success: function(result){
                  console.log(result);
                }});
            }
    });
</script>

& 在 php 中检查类似

$ImageFile = $this->input->post('filename');
$config['upload_path'] = './assets/client_img/.';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 1024 * 8;
$config['encrypt_name'] = TRUE;
$this->load->library('upload', $config);

if (!$this->upload->do_upload('ImageFile')) 
    {
     $error1 = array('error' => $this->upload->display_errors());
     print_r($error1);
    }
else
    {
      $data1 = $this->upload->data();
      echo $data1['file_name'];
    }