XMLHttpRequest - Laravel
XMLHttpRequest - Laravel
提问于 2014-03-12 19:35:32
我正在用laravel上传一个文件，并使用ajax请求为其创建进度条。表单操作是这样路由到控制器的：
<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'
));回答 1
Stack Overflow用户
回答已采纳
发布于 2014-03-12 20:31:10
只需使用JavaScript获取表单操作属性
//Whatever your action value
var action = document.formName.getAttribute('action');First:
不要在submit按钮上混合onclick事件，单击submit按钮实际上处理表单本身。最好将提交事件绑定到窗体，而不是绑定提交按钮上的单击事件。
通过向表单(如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不匹配令牌问题(参考)
在当前窗体视图文件的<meta >标记中添加下面的<head>标记。
<meta name="csrf-token" content="<?php echo csrf_token() ?>">或使用刀片
<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"));
}
}请参阅此JavaScript中更新的小提琴代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22362032
复制相关文章
相似问题
腾讯云开发者
