通過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>

問題出在后端主頁/ add_blog中：

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

如果您需要更多詳細信息來解決此問題。 只是評論。 需要盡快解決。 再次感謝你。

Answer 1

未定義的索引請注意，數組$ _FILES不包含“ file1”鍵集。 您嘗試通過ajax發送文件的方式可能無法正常工作。

我建議您嘗試使用FormData。 我相信下面的鏈接是解決您的問題的良好參考。

如何使用FormData進行Ajax文件上傳