Jquery File Upload 在 .Net MVC 上显示文件列表答案

【问题标题】：Jquery File Upload showing File List on .Net MVCJquery File Upload 在 .Net MVC 上显示文件列表
【发布时间】：2014-04-20 07:29:30
【问题描述】：

我已经安装了 NuGet Jquery 文件上传插件。上传器很好用。我可以使用它轻松拖放并将文件上传到我的服务器。

只有 2 个问题阻碍了我完成这个项目。

上传文件后，我需要将这些文件显示给用户，即最近上传文件的列表。但是，当调用页面并显示已上传文件的列表时，我没有正确显示文件列表，而是将此 JSON 文档嵌入到 Html 文件中。 Json 文件确实包含之前上传的文件的正确数据。

见下文...这里只显示了一部分。

[{"group":null,"name":"999408_10153832503160788_1245106221_n.jpg","type":"image/png","size":78950,"progress":"1.0","url":"/Upload/UploadHandler.ashx?f=999408_10153832503160788_1245106221_n.jpg","thumbnail_url":"data:image/png;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIM

以下代码是处理所述 JSON 文件准备的代码。调用此方法后，我只需返回视图。

   public ActionResult Index()
    {
       this.ListCurrentFiles();


        return View();
    }



 private void ListCurrentFiles()
    {
        var files =
           new DirectoryInfo(this.rootImgFolder)
           .GetFiles("*", SearchOption.TopDirectoryOnly)
           .Where(f => !f.Attributes.HasFlag(FileAttributes.Hidden))
           .Select(f => new FilesStatus(f)) //Need to check more this FilesStatus Code.
           .ToArray();

        if (files.Any()) {  //Only if there are files there show.



            string jsonObj = js.Serialize(files);
            HttpContext.Response.AddHeader("Content-Disposition", "inline; filename=\"files.json\"");
            HttpContext.Response.Write(jsonObj);
            HttpContext.Response.ContentType = "application/json";
        }
    }

我认为，由于他们的文档只是显示了这一点，因此它会正确显示文件应有的方式。查看他们的演示，以便您了解我对正在显示的文件的意思。 jQuery File Upload Demo

【问题讨论】：

标签： jquery json file-upload jquery-file-upload

【解决方案1】：

我找到了解决这个问题的方法...

我很惊讶缺乏没有指出这一点的文档，所以不明显，问题......

当Json被序列化并写入HTTPContext.Response时，下载插件时Json文件默认是这样结构化的

 [
  { 
  name: "pic.jpg",
   type: "IMAGE",
   size: "123123".
   },
  { 
    name: "pic2.jpg",
     type: "IMAGE",
     size: "123432443".
   }


 ]

由于他们的文档说文件在下载时已准备好使用，我认为这不会是文件已上传但未在表中正确显示的原因。

然而，在他们的文档中是一个关于 JSON 文件应该是什么样子的小示例，但如果不密切注意，它很容易被忽略。

  [ 
 { "files":
  { 
  name: "pic.jpg",
   type: "IMAGE",
   size: "123123".
   },
  { 
    name: "pic2.jpg",
     type: "IMAGE",
     size: "123432443".
   }


} ]

一旦更改为这种格式。上传者正确上传了文件，之后显示它们不再有问题。

【讨论】：