javascript - 通过ajax和jquery上传文件

Question

大家晚上好，当我提交表单时，我的系统后端出现了问题。它说未识别的索引:file1。我无法修复代码中的错误。我不是 javascript 的新手，正在寻求你们的帮助。提前谢谢。

这是我的 HTML 表单

<form id="submit_form" action="<?php echo base_url()?>Homepage/add_blog" enctype="multipart/form-data" method="POST" >
    <input type="text" class="form-control" id="title" name="title" autocomplete="off">
    <input type="text" class="form-control" id="lead" name="lead" autocomplete="off">
    <input type="text" id="tags" name="tags"  data-role="tagsinput" placeholder="Add tags" class="form-control" >
    <input type="file" id="file1" name="file1"  >
    <textarea id="content" name="content" rows="10" cols="80">
      Put the content here!!!
    </textarea>
</form>

这是我的脚本

<script>
  function _(el)
  {
    return document.getElementById(el);
  }
  $(document).ready(function()
  {
    $('#submit').click(function(e)
    {
       e.preventDefault();
      var file = _("file1").files[0];
      var title = $('#title').val();
      var lead = $('#lead').val();
      var tags = $('#tags').val();
      var content = $('#content').val();

      if(title == '' || lead == '' || tags == '' || content =='')
      {
        $('#response').html('<br><div class="panel panel-danger"><div class="panel-body"><center><span class="text-danger">All fields are required</span></center></div></div>');
        $('#response2').html('<div class="panel panel-danger"><div class="panel-body"><center><span class="text-danger">All fields are required</span></center></div></div><br>');
      }
      else
      {
        $.ajax({
          url:"<?php echo base_url()?>Homepage/add_blog",
          method:"POST",
          data:$('#submit_form').serialize(),
          beforeSend:function()
          {
            $('response').html('<span class="text-danger">Loading...</span>');
            $('#submit').prop("disabled", true);
            var formdata = new FormData();
            formdata.append("file1",file);
            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress",progressHandler,false);
            ajax.addEventListener("load",completeHandler,false);
            ajax.addEventListener("error",errorHandler,false);
            ajax.addEventListener("error",abortHandler,false);
            ajax.open("POST","<?php echo base_url()?>Homepage/add_blog");
            ajax.send(formdata);
          },
          success:function(data)
          {
            $('form').trigger("reset");
           $('#tags').tagsinput('removeAll');
           $('#tags').tagsinput('destroy');
            CKEDITOR.instances.content.setData('');
            $('#response').fadeIn().html(data);

          }
        });
      }
    });
    $('#title,#lead,#tags,#content').focus(function(){
      $('#submit').prop("disabled", false);
    });
  });
  function progressHandler(event)
  {
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded;
    var percent = (event.loaded/event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded.. please wait";
  }
  function completeHandler(event)
  {
    _("progressBar").value = 0;
  }
  function errorHandler(event)
  {
    _("status").innerHTML = "Upload Failed.";
  }
  function abortHandler(event)
  {
    _("status").innerHTML = "Upload Aborted.";
  }
</script>

问题出在后端Homepage/add_blog:

$filename = $_FILES["file1"]["name"];
echo $filename;

如果您需要更多详细信息来解决此问题。只是评论。需要尽快解决这个问题。再次感谢您。

Answer 1

未定义索引请注意数组 $_FILES 不包含“file1”键集。可能您尝试通过 ajax 发送文件的方式无法正常工作。

我建议您尝试使用 FormData。我相信下面的链接是解决您问题的一个很好的引用。

How to use FormData for ajax file upload