我正在使用 laravel 上传文件并使用 ajax 请求为其创建进度条。 这是表单操作路由到 Controller 的方式:
<form action="{{ URL::route('upload-file-form-post') }}" method="POST" enctype="multipart/form-data">
.
.
</form>
Ajax :
function _(el) {
return document.getElementById(el);
}
function uploadfile() {
var file = _("file").files[0];
// dev
alert(file.name+" | "+file.size+ " | "+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.open("POST", "here_is_where_the_url_needs_to_go");
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;
}
有没有办法发送这个
{{ URL::route('upload-file-form-post') }}到ajax请求？
在我的路由文件中，上面的内容被引用为:
Route::post('/asset/upload-file', array(
'as' => 'upload-file-form-post',
'uses' => 'AssetController@postUploadCreate'
));
最佳答案
简单的使用JavaScript获取表单的action属性
//Whatever your action value
var action = document.formName.getAttribute('action');
首先:
不要混用onclick提交按钮上的事件，单击提交按钮实际上处理表单本身。最好将提交事件绑定(bind)到表单而不是绑定(bind)提交按钮上的点击事件。
通过给出 name属性到您的表单，如 name="my_form" ，您可以将提交事件处理程序添加到您的表单。
像这样:
document.my_form.addEventListener('submit', function(e) {
e.preventDefault();
var actionURL = this.action; // will get the form action url
uploadfile(actionURL); // your upload event with request url
});
你的函数 uploadfile(..)将接受一个名为 URL 的参数。这将传递给 ajax.open(..)方法
修改:
// -----------------!!!! pass parameter for url
function uploadfile(url) {
var file = _("file").files[0];
// dev
alert(file.name+" | "+file.size+ " | "+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.open("POST", url); // your url will pass to open method
ajax.send(formdata);
}
已编辑:
修复 Laravel 不匹配 token 问题 (Referrence) :
在下方添加<meta >在您的 <head> 中标记当前表单 View 文件的标记。
<meta name="csrf-token" content="<?php echo csrf_token() ?>">
或者用 Blade
<meta name="csrf-token" content="{{{ csrf_token() }}}">
现在在您的 uploadfile(...) 中函数添加此代码段:
var metas = document.getElementsByTagName('meta');
for (i=0; i<metas.length; i++) {
if (metas[i].getAttribute("name") == "csrf-token") {
ajax.setRequestHeader("X-CSRF-Token", metas[i].getAttribute("content"));
}
}
请参阅此 fiddle 中更新的 JavaScript 代码
关于javascript - XMLHttpRequest-Laravel，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22362032/