使用AllowMultiple = true维护FileUpload中所选文件的顺序

Question

我有一个<asp:FileUpload>控件,其属性AllowMultiple设置为true:

<asp:fileupload id="FileUpload" runat="server" allowmultiple="true" cssclass="fileUpload btn btn-sm btn-default" onchange="preloadImages()" />

<div class="field col-md-2 col-md-offset-1 immScarpePreview MainPreviewBox">
 <asp:image id="Image1" runat="server" visible="false" cssclass="img-responsive" />
 <asp:button id="ImmButton" runat="server" text="Upload" onclick="ImmButton_Click" cssclass="hidden" />
</div>

在我的JavaScript函数中,我模拟了对隐形按钮的单击:

<script>
    function preloadImages() {
        $('#<%=ImmButton.ClientID%>').trigger('click');
    }
</script>

在代码隐藏中,我将文件保存到临时文件夹,然后在<asp:Image>控件中显示上传的图像:

 protected void ImmButton_Click(object sender, EventArgs e)
 {
        if (FileUpload.HasFile)
        {
            try
            {
                int cont = 0;
                byte[] fileData = null;
                foreach (HttpPostedFile file in FileUpload.PostedFiles)
                {
                    if (cont == 0)
                    {
                        using (var binaryReader = new BinaryReader(file.InputStream))
                            fileData = binaryReader.ReadBytes(file.ContentLength);
                        File.WriteAllBytes(Server.MapPath("immScarpe/tmp/" + file.FileName), fileData);
                        setImage1("immScarpe/tmp/" + file.FileName);
                    }
                    else if (cont == 1)
                    {
                        using (var binaryReader = new BinaryReader(file.InputStream))
                            fileData = binaryReader.ReadBytes(file.ContentLength);
                        File.WriteAllBytes(Server.MapPath("immScarpe/tmp/" + file.FileName), fileData);
                        setImage2("immScarpe/tmp/" + file.FileName);
                    }
                    else if (cont == 2)
                     //and so on...

                    //so on...
                    cont++;
                }
            }
            catch(Exception ex)
            {
                //error writing file
                Console.Write(ex.Message);
            }
        }
 }

 private void setImage1(string image) //all equals for all the 5 images
 {
     Image1.ImageUrl = image;
     Image1.Visible = true;
 }

这是完美的工作,但我需要一些帮助.当我遍历FileUpload.PostedFiles时,我认为所选图像的顺序是按字母顺序排列的.我想保留用户选择的顺序.这可能吗？

Answer 1

我有坏消息，至少如果您\xe2\x80\x99 使用的是 Windows。

\n\n

我在 Windows 10 上使用 Chrome、Edge、Firefox 和 Internet Explorer 测试了您的代码，并使用 Telerik Fiddler 检查了 HTTP POST 请求。我在所有浏览器中得到相同的结果：

\n\n

\n
• FileUpload.PostedFiles 集合中的文件顺序与 HTTP 请求中的文件顺序相同；ASP.NET 不会\xe2\x80\x99 对集合中的文件进行排序。
\n
• HTTP请求中的文件顺序与上传控件中的文件顺序相同；浏览器不会对 HTTP 请求中的文件进行排序。（为了查看上传控件中的文件，我禁用了您的preloadImages功能。）
\n
• 上载控件(以及客户端files集合)中的文件顺序不一定与Windows 文件选择对话框中的文件名框中的顺序相同:\n\n
  \n
  • 如果我不按顺序手动键入文件名，则上载控件会按照我键入的顺序列出文件，并且 FileUpload.PostedFiles 集合会维护该顺序。
  \n
  • 但是，如果我通过按住 Ctrl 键并单击来乱序选择文件，则上传控件会按字母顺序列出文件，FileUpload.PostedFiles 集合也是如此。
  \n
\n

\n\n

在最后一种情况下，我假设 Windows 在将文件提供给浏览器之前对它们进行排序。如果\xe2\x80\x99为真，那么浏览器永远不会收到用户选择的原始顺序，因此你可以\xe2\x80\x99t维持该顺序，即使使用JavaScript也是如此。

\n\n

如果您绝对必须维护多个上传文件的顺序，那么您可能需要有多个<asp:FileUpload>控件，每个控件都带有AllowMultiple="False".

\n