具有多个提交按钮的多个文件上传

Question

例如，我有 5 个文件上传控件，而且我还有一个提交按钮（在每个文件上传控件前面），它将上传该文件上传的选定文件。

但是有一个问题，当我点击（例如）第二个提交按钮上传第二个文件上传的文件时，我们将有一个回发，其他文件上传的文件将重置为空。我该如何管理这种情况，以便当用户单击提交按钮时，相关文件上传的文件上传和其他文件上传的文件保持其状态。希望我足够清楚。

图片效果更好：

Answer 1

免责声明-这只是对此处出色答案的修改：How can I upload files asynchronously? 我假设你有 jQuery。

<div>
    <asp:FileUpload ID="fu1" runat="server" CssClass="fu1" />
    <asp:Button ID="btn1" runat="server" OnClientClick="upload(this,'.fu1'); return false" Text="Submit" />
</div>
<div>
    <asp:FileUpload ID="fu2" runat="server" CssClass="fu2" />
    <asp:Button ID="btn2" runat="server" OnClientClick="upload(this,'.fu2'); return false"  Text="Submit" />
</div>

<script type="text/javascript">
    function upload(element,selector)
    {
        var formData = new FormData();
        formData.append('image', $(selector)[0].files[0]);

        $.ajax({
            url: '<%= Page.Form.Action %>',  //Server script to process data
            type: 'POST',
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
    }
</script>

那么在Page_Load内：

Page.Form.Attributes["enctype"] = "multipart/form-data";
var file = Request.Files["image"];
if (file != null)
{
  // do something with the file
}