多个提交按钮的多个FileUpload

Question

我有5个文件上传控件，并且每个文件上都有一个提交按钮（在每个文件上传控件的前面），它将上传该文件上载的所选文件。

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

获得更好结果的图片：

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
}