Php 使用jQuery ajax从多个文件上传框上传图像

我在一个HTML表单中有多个文件上传框，每个文件框中都有一个相关的上传按钮和一个div容器。单击upload按钮应该通过AJAX jQuery上传相应的文件。我很喜欢各种各样的问题和博客，它们总是有一个文件上传和一个提交按钮。但我这里的问题是如何在不提交整个表单的情况下，在按钮上的单击事件中上载所选文件。可能吗

我还添加了一个模拟HTML代码和相应的JSFIDLE

<form id='parent-form' action='complete.php'>
    <div>
        <input type='file' name='img1'/>
        <input type='button' value='upload' name='btnimg1' />
    </div>
    <div>
        <input type='file' name='img2'/>
        <input type='button' value='upload' name='btnimg2' />
    </div>
    <div>
        <input type='file' name='img3'/>
        <input type='button' value='upload' name='btnimg3' />
    </div>
    <br/>
    <input type='submit' value='Complete' />
</form>

---

并非所有浏览器都支持通过AJAX上传文件，但在现代浏览器中这是可能的。您需要在文件字段旁边的按钮上附加一个侦听器，或者您可以一次上载多个图像

看看这个答案：

这是一件事：

<form>
    <input type="file" multiple>
</form>

---

然后在提交主表单时，获取AJAX上传的数据。

谢谢您的回答。但我不想选择和上传多个图像。我需要选择单个文件，但在不同的类型上=file box.Gotcha。在提交表单之前用AJAX加载文件有什么好处？我的想法是对每个上传者使用单独的s，然后使用Javascript检查上传是否完成，并抓取数据与主表单一起提交。好处是用户可以查看上传的图像，一旦用户满意，他可以单击最终表单提交，然后点击数据库。这就是我的想法。嗯，我有一个关于它如何工作的理论，但也许你可以考虑一下重新措辞你的问题，让其他一些伟大的人来考虑。谢谢。我指的是链接。单击第一个上载按钮时，完整表单数据将通过AJAX发送。它不会只发送第一个图像。如果我错了，请纠正我。你也可以只上传一个文件。只需将侦听器从$'imageUploadForm'。在'submit'上更改为$'.uploadImageButton'。在'click'上，并将类uploadImageButton添加到按钮中。

$('[name^="btnimg"]').click(function(){
    /* AJAX sexiness here */
    return false; // IMPORTANT... keeps the main form from submitting
}