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

未定義のインデックス通知を。おそらくあなたは、AJAX経由でファイルを送信しようとしている方法が正常に動作していない。

私はあなたがいるFormDataを使用しようとお勧めしたい。私は下のリンクはあなたの問題を解決するには良いの参照であると考えている。

How to use FormData for ajax file upload

Answer 2

次の2つのAjaxリクエスト/フォームの送信（jQueryとbeforeSend機能で別のものを使用して一つ作っているなぜ私は得ることができませんでした。配列$ _FILESは、「FILE1」キーセットが含まれていないことを