Laravel 5.2 ajaxアップロードプログレスバーとTokenMismatchExceptionがVerifyCsrfToken.php行67

Question

イメージアップロードにプログレスバーを統合しようとしています。私のコードは、PHPでフォームを送信するときにうまく動作しますが、プログレスバーでjavascriptをインクルードすると、 "TokenMismatchException VerifyCsrfToken.php line 67"というエラーが発生します。これは私のフォームです：

{!! Form::open(array('files' => true, 'class' => 'form', 'route' => ['backend.posts.uploadimage', $post->id])) !!} 
    <div class="form-group"> 
     {!! Form::file('image', ['id' => 'image']) !!} 
    </div> 
    <hr> 
    <input type="button" value="Upload Image" class="btn btn-info btn-sm" onclick="uploadImage()"> 
{!! Form::close() !!} 

このフォームはトークンと非表示の入力フィールドを生成します。

<input name="_token" type="hidden" value="jGQWC2GljiSeZrL8wvfMaH490xHOh727345U6HzK"> 

私のjavascriptのコードはこれです：画像をアップロードするための私のPostControllerで

function uploadImage() 
    { 
     var file = document.getElementById("image").files[0]; 
     var id = {{ $post->id }}; 

     var formdata = new FormData(); 
     formdata.append("image", file); 

     var ajax = new XMLHttpRequest(); 
     ajax.upload.addEventListener("progress", progressHandler, false); 
     ajax.addEventListener("load", completeHandler, false); 
     ajax.addEventListener("error", errorHandler, false); 
     ajax.addEventListener("abort", abortHandler, false); 
     ajax.open("post", "{{ route('backend.posts.uploadimage', $post->id) }}"); 
     ajax.send(formdata); 
    } 

    function progressHandler(event) 
    { 
     var percent = (event.loaded/event.total) * 100; 
     document.getElementById("progressPercent").style.width = Math.round(percent); 
    } 
    function completeHandler(event) 
    { 
     document.getElementById("status").innerHTML = event.target.responseText; 
     document.getElementById("progressPercent").style.width = 0; 
    } 
    function errorHandler(event) 
    { 
     document.getElementById("status").innerHTML = "Upload Failed"; 
    } 
    function abortHandler(event) 
    { 
     document.getElementById("status").innerHTML = "Upload Aborted"; 
    } 

および方法でありますこれは：

どのように私は純粋なJavaScriptを使用して、隠しフィールドからトークンを投稿することができますか、またはこの問題を解決するための他のソリューションがありますか？助けてください。

Answer 1

getElementsByName()を使用して入力フィールドの値を取得します。

var _token = document.getElementsByName('_token')[0].value; 
//and append the value to form data 
formdata.append("_token", _token);