Question

我在一个HTML表单中有多个文件上传框，每个文件框中都有一个关联的上传按钮和一个div容器。单击上传按钮应通过AJAX（jQuery）上传相应的文件。我崇敬各种问题和博客，总有一个文件上传，一个提交按钮。但我的问题是如何在按钮上单击事件上传所选文件而不提交整个表单。这可能吗？

我放了一个模拟的HTML代码和相应的jsfiddle

<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>

http://jsfiddle.net/z1bj4v9t/

Answer 1

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

看一下这个答案：https://stackoverflow.com/a/20462576/1997303

Answer 2

这是件好事：

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

在兼容HTML5的浏览器中，将“multiple”属性添加到<input type="file">。 A similar question was asked here

我相信后备选项是实际使用Flash（所有内容）插件来强制您的输入能够抓取多个文件。至少这是Facebook和其他人几年前在我查看时的做法。

编辑以解决您的评论：

我可能会这样做：

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

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

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

2 个答案:

编辑以解决您的评论：