为文件夹 [javascript] 中的文件生成 URL 链接列表

Question

如果我在特定文件夹中有以下文件，我想为 folder.For 示例中的每个文件生成列表

sample_picture1.jpg
sample_picture2.jpg

我想生成 URL 链接如下

[0] - src='http://localhost/path/sample_picture1.jpg'
[1] - src='http://localhost/path/sample_picture2.jpg'

目前我是这样创建的。

json在文件夹中查找文件的方法

    public JsonResult filesinfolder()
    {
        string salesFTPPath = "folder_path";

        DirectoryInfo salesFTPDirectory = new DirectoryInfo(salesFTPPath);

        IEnumerable<string> files = salesFTPDirectory.GetFiles()
          .Where(f => f.Extension == ".xls" || f.Extension == ".xml" || f.Extension == ".jps" || f.Extension == ".jpg" || f.Extension == ".jpeg" || f.Extension == ".png")
          .OrderBy(f => f.Name)
          .Select(f => f.Name);

        return Json(files, JsonRequestBehavior.AllowGet);
    }

获取文件的脚本

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("filesinfolder", "Home")',
        dataType: "json",
        success: function (data) { onSuccess(data); },
        error: function (xhr, status, err) {}
    });
});

var onSuccess = function (data) {

};

所以我想将结果作为 URL 的列表（对于文件夹中的文件）带到 onSuccess。

Answer 1

由于您 ajax 调用是在 document.ready 上执行的，因此似乎没有必要使用 ajax，并且您可以通过将 url 集合传递给视图来简化它。假设您使用视图模型，添加一个属性（例如）IEnumerable<string> ImageUrls { get; set; }（或者您可以将集合分配给 ViewBag 属性）

在生成视图的GET方法中

// get the files
IEnumerable<string> files = salesFTPDirectory.GetFiles().Where(....
// build urls
model.ImageUrls = new List<string>();
foreach (string name in files)
{
  model.ImageUrls.Add(Url.Content("~/path") + "/" + name);
}
return View(model);

并在视图中

@foreach(string url in Model.ImageUrls)
{
  <img src="@url" height="100" width="100" />
}

假设您查询生成的文件名是sample_picture1.jpg和sample_picture2.jpg，那么这将生成

<img src="/path/sample_picture1.jpg" ... />
<img src="/path/sample_picture2.jpg" ... />

如果您确实想使用 ajax 执行此操作，则在 filesinfolder() 方法中生成上述 url 并 return 它们，然后在 success 回调中

success: function (data) {
  $.each(data, function(index, item) {
    var img = $('<img>').attr('src', item);
    $(someElement).append(img);
  });
}

旁注：你有 string salesFTPPath = "folder_path"; 但你想生成 .../path/... 而不是 .../folder_path/... 有点令人困惑（我假设其中一个是打字错误），但在无论如何，一旦您发布您的应用程序，这将不起作用。您将需要使用 Server.MapPath() 生成文件夹的正确路径。

为文件夹 [javascript] 中的文件生成 URL 链接列表

generate a list of URL links for files in folder [javascript]

javascript

asp.net-mvc

jquery

asp.net-mvc-3