![](/img/trans.png)
[英]TokenMismatchException in VerifyCsrfToken.php line 67 on laravel using ajax
[英]Laravel 5.2 ajax upload progress bar and TokenMismatchException in VerifyCsrfToken.php line 67
我正在嘗試在圖片上傳中集成進度條。 當我使用PHP提交表單時,我的代碼工作正常,但是當我在進度條中包含javascript時,出現錯誤“ VerifyCsrfToken.php 67行中的TokenMismatchException”。 這是我的表格:
{!! 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代碼是這樣的:
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";
}
我的PostController中用於上傳圖片的方法是這樣的:
public function uploadImage(Requests\UploadImageRequest $request, $id)
{
$post = $this->posts->findOrFail($id);
$image = $request->file('image');
$imageName = $image->getPathName();
$newImageName = $post->id . '-' . md5(microtime());
$imageExtension = $image->getClientOriginalExtension();
$imageFile = $newImageName . '.' . $imageExtension;
$path = public_path();
move_uploaded_file($imageName, $path . '/images/img_upload/' . $imageFile);
$post->where('id', $id)->update(['image_name' => $newImageName, 'ext' => $imageExtension]);
return view('backend.posts.uploadimage');
}
如何使用純JavaScript從隱藏字段中發布令牌,或者是否有其他解決方案來解決此問題? 請幫忙。
使用getElementsByName()
獲取輸入字段的值。
var _token = document.getElementsByName('_token')[0].value;
//and append the value to form data
formdata.append("_token", _token);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.