使用Ajax上传多张图片的Laravel方法

Question

我一直在尝试在 Laravel 4 中使用 jQuery 和 Ajax 上传多张图片，同时不刷新页面并带有进度条、删除按钮和预览功能（上传成功后显示缩略图，点击删除按钮从数据库中删除）。

我尝试了许多方法，包括使用（http://packalyst.com/packages/package/sukohi/surpass）（即使按照每个步骤操作，仍然无法正常工作）。我还尝试了另一种方法（https://gist.github.com/filip-adriginal/bd397c5ec22a5916a966#file-gistfile1-txt）并尝试使用 jQuery-File-Upload。

我可以使用 Controller 中的 foreach 来上传多张图片：

 {{ Form::file('image[]', array('multiple'=>true)) }}

我也看了一些视频、教程和博客，但它们要么只有部分信息，要么存在未解决的问题。

如果有人能给我一些示例代码或指导方向，那就太好了！感谢大家提供的任何帮助，真的很感激。

- Filip Nikolic

---

首先，你应该在没有 AJAX 的情况下上传图片。这是我的建议，特别是在刚开始的阶段。 - Rafael

目前有什么问题？当您将文件输入名称定义为数组时，您应该在控制器上将文件作为数组接收。在Input :: file ['image']上运行for循环。 - astroanu

上传功能很好，我能够将多个图像上传到特定文件夹，但我不知道如何使用Ajax。使用{{ Form::file('image[]', array('multiple'=>true)) }}，我还可以将它们的名称和位置存储在数据库中，但是当我查看如何使用Ajax实现它时，似乎我必须更改所有代码。 - Filip Nikolic

Taylor Otwell，Laravel背后的人，一直说如果你对Laravel的某些功能感到不舒服，你总是可以在这里和那里进行更改。我个人讨厌blade。它很混乱。你应该尝试使用常规表单HTML语法，看看是否有效。 - astroanu

我实际上已经通过以下代码使其在某个程度上工作了：<script> var form = document.querySelector('#ajax'); var request = new XMLHttpRequest(); form.addEventListener('submit',function(e) { e.preventDefault(); var formdata = new FormData(form); request.open('post', 'submit'); request.send(formdata); }, false); </script> 现在我遇到了一个405 MethodNotAllowedHttpException错误。 - Filip Nikolic

我成功让它工作了，谢谢大家的帮助！:D - Filip Nikolic

Answer 1

尝试使用DropzoneJs。我认为它是最好的上传JS插件。

- Tim

Answer 2

在Laravel中使用AJAX多文件上传的教程是一个很棒的教程，使用了Dropzone.js，请查看。同时，请查看这篇Laravel AJAX多图像上传和预览教程，也使用了Dropzone.js。

- Amr