cch*_*cch 3 javascript php ajax laravel
我正在使用 laravel 上传文件并使用 ajax 请求为其创建进度条。这是表单操作路由到控制器的方式：
<form action="{{ URL::route('upload-file-form-post') }}" method="POST" enctype="multipart/form-data">
.
.
</form>
阿贾克斯：
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 即可获取表单操作属性
//Whatever your action value
var action = document.formName.getAttribute('action');
第一的：
不要onclick在提交按钮上混合事件，单击提交按钮实际上会处理表单本身。最好将提交事件绑定到表单而不是在提交按钮上绑定点击事件。
通过为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 Mismatch 令牌问题（参考）：
<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 代码
| 归档时间： |
|
| 查看次数： |
7357 次 |
| 最近记录： |