laravel 中上传文件的进度条

Question

我的代码用于输入

<input id="imgages" name="imgages" type="file"  onchange="uploadFile()" />

我的脚本是：

function _(el) {
 return document.getElementById(el);
}

function uploadFile() {
  var file = _("imgages").files[0];
  
  var formdata = new FormData();
  formdata.append("imgages", 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", "file_upload_parser.php"); 

  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

我的问题是我怎样才能把这部分用 url 用于 laravel 并在这 ajax 部分添加 csrf？我的意思是我不知道如何在此脚本中添加 csrf 令牌 laravel。

  ajax.open("POST", "file_upload_parser.php");

Answer 1

您可以添加 html 的 csrf token in the head ...

<meta name="csrf-token" content="{{ csrf_token() }}">

... 并使用 formData.set('_token', document.querySelector('[name="csrf-token"]').getAttribute('content')) 将其与请求一起发送。

Answer 2

我发现了我的问题我必须在 formdata.append("imgages", file);

之后添加令牌

formdata.append("imgages", file);
formdata.append("_token", '{{ csrf_token() }}');

然后我在主机中添加了一条商店路线。

laravel 中上传文件的进度条

progressbar for uploading file in laravel

laravel

input

file-upload

progress-bar

csrf-token