Question

我正在尝试使用Ajax在CodeIgniter中上载文件，但是问题是文件正在数据库中上载，但是在不加载页面的情况下无法执行。每次我上传文件时，它都会成功上传，但是会使用JSON代码导航到其控制器地址。我只想上传文件而不刷新页面。

查看文件

<?php echo form_open_multipart('maker/Checkout/docs', array('id'=>'upload_file')); ?>


          <div class="form-group">
              <label for="userfile">Upload existing CV</label>
              <input class="form-control" type="file" name="userfile" id="userfile" size="20" />
          </div>

          <div class="form-group">
            <button class="btn btn-info" type="submit">Upload</button>
          </div> 

       <?php echo form_close() ?>

Ajax代码

<script>

  $(function() {
    $('#upload_file').unbind('submit').bind('submit', function() {
      e.preventDefault();
       var form = $(this);
         $.ajax({
          url : form.attr('action'), 
          type: form.attr('method'),
          data: form.serialize(),
          secureuri   :false,
          fileElementId :'userfile',
          dataType    : 'json',
          success : function (data, status)
          {
            if(data.status != 'error')
            {
              $('#files').html('<p>Reloading files...</p>');

            }
            alert(data.msg);
          }
        });
        return false;
      });
  });

</script>

控制器

public function docs() {
      $status = "";
      $msg = "";
      $file_element_name = 'userfile';


    if ($status != "error")
    {
        $config['upload_path'] = dirname($_SERVER["SCRIPT_FILENAME"])."/assets/img/posts";
        $config['upload_url']  = base_url()."/assets/img/posts";
        $config['allowed_types'] = 'gif|jpg|png|jpeg|pdf|doc|docx|docs|txt|xml';
        $config['max_height'] = 102048;
        $config['max_width']  = 102048;
        $config['max_size'] = 1024 * 8;
        $config['encrypt_name'] = TRUE;

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload($file_element_name))
        {
            $status = 'error';
            $msg = $this->upload->display_errors('', '');
        }
        else
        {
            $data = $this->upload->data();
            $file_id = $this->Checkout_model->newcheckout($data['file_name']);
            if($file_id)
            {
                $status = "success";
                $msg = "File successfully uploaded";
            }
            else
            {
                unlink($data['full_path']);
                $status = "error";
                $msg = "Something went wrong when saving the file, please try again.";
            }
        }
        @unlink($_FILES[$file_element_name]);
      }
      echo json_encode(array('status' => $status, 'msg' => $msg));
    }

我只想上传文件而不刷新页面。当前，它正在上传文件，但是在将其导航到控制器地址之后。

Answer 1

您导航到控制器的原因是因为您对preventDefault的调用来自一个不存在的标识符e导致错误，您可以将其删除，因为稍后您返回false或只是定义e。
现在，当您尝试使用ajax上传文件时，可以使用FormData对象

$(function() {
  $('#upload_file').unbind('submit').bind('submit', function(e) {//<-- e defined here
    e.preventDefault();
    var form = $(this);
    var data = new FormData(this);
    $.ajax({
      url : form.attr('action'), 
      type: form.attr('method'),
      data: data,
      processData: false,
      contentType: false, 
      dataType    : 'json',
      success : function (data, status)
      {
        if(data.status != 'error')
        {
          $('#files').html('<p>Reloading files...</p>');

        }
        alert(data.msg);
      }
    });
    return false;
  });
});

Answer 2

下面给出的对我有用的解决方案略有不同：

<script type="text/javascript">
    $(function() {

        $('#upload_file').unbind('submit').bind('submit', function(e) {
            e.preventDefault();
            var file = document.getElementById('userfile').files[0];
            if(file==undefined){
                return false;
            }
            var formData = false;
            if (window.FormData) {
                formData = new FormData();
                formData.append("userfile", file);
            }
            var form = $(this);
            if(formData!==false){
                $.ajax({
                    url : form.attr('action'),
                    type: form.attr('method'),
                    data: formData,
                    processData: false,
                    secureuri: false,
                    contentType: false,
                    success : function (data, status)
                    {
                        if(data.status != 'error')
                        {
                            $('#files').html('<p>Reloading files...</p>');

                        }
                        alert(data.msg);
                    }
                });
            }
            return false;
        });
    });
</script>

无法使用AJAX在codeigniter中上传文件

2 个答案: