如何解决Dropzon JS库未上传多个图像
dropzone js库未将多个图像上传到数据库中。其他配置选项(例如 addRemoveLink )有效,但是** paramName **和** uploadMultiple **似乎不起作用。 javascript的新手可以帮助我如何检查或显示要发送到服务器的输入文件中的输入,这也至少会有所帮助。
请注意,该代码可以正常运行,而无需将dropzone类包含在表单中
html刀片文件
<link rel="stylesheet" href="/dropzone/dist/dropzone.css">
<script src="/dropzone/dist/dropzone.js"></script>
<form action="/p" class ="dropzone" id ="myDropzone" enctype="multipart/form-data" method="post" files = "true">
@csrf
<div class="fallback">
<input type="file" id ="image" multiple name="image" >
</div>
<div class="btn btn-primary">
<button id ="submit-all"> add img post</button>
</div>
</form>
javascript
<script>
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,uploadMultiple: true,paramName: "image",addRemoveLinks: true,init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click",function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile",function() {
// Show submit button here and/or inform user to click it.
});
}
};
</script>
后控制器
public function store( Request $request )
{
if($request->hasFile('image'))
{
$files = $request->file('image');
dd($files);
foreach($files as $file)
{
$name = time().'-'.$file->getClientOriginalName();
$name = str_replace('','-',$name);
echo $name;
$file->move('images',$name);
$post->images()->create(['image' => $name ]);
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。