javascript - 传递给initialPreview属性的<img>标签数组

Question

在以下函数的 initialPreview 中我想要加载 <img> 的属性标签。为此我正在创建

$("#id").fileinput({
        .......,
        initialPreview: [ getFiles() ],
    });

我刚刚创建了getFiles()方法如下

$(document).ready(function getFiles() {
var files = [];

$.ajax({
type: 'GET',
url: '@Url.Action("filesinfolder", "Home")',
dataType: "json",
success: function (data) {

$.each(data, function (index, item) {    
   files.push(img.get(0));
   return files;    
});},

error: function (xhr, status, err) {
}
});
});

然后我编写了以下服务器端方法来获取文件

     public JsonResult filesinfolder(string productid,ProductEdit model)
    {
        productid = "01";

        string salesFTPPath = "C:/Users/user/Documents/Visual Studio 2015/Projects/rootProject/project_name/project_name/Content/Essential_Folder/marketing_materials_EN/01";
        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" || f.Extension == ".PNG")
          .OrderBy(f => f.Name)
          .Select(f => f.Name);

        // build urls
        model.ImageUrls = new List<string>();

        foreach (string name in files)
        {
            model.ImageUrls.Add(Url.Content("~/Content/Essential_Folder/marketing_materials_EN/" + productid) + "/" + name);
        }

        return Json(model, JsonRequestBehavior.AllowGet);
    }

在服务器代码中调试后，我可以看到模型如下

但在这里我不知道如何将这些 URL 推送到 getFiles() 内的数组中 成功事件。

其实我想得到initialPreview值如下

initialPreview:[ "<img src='http://localhost:49669/Content/Essential_Folder/marketing_materials_EN/Image1.jpg'>", "<img src='http://localhost:49669/Content/Essential_Folder/marketing_materials_EN/Image2.jpg''>", ....],

Answer 1

您应该使用从服务器调用返回的数据的 ImageUrls 属性(这是一个数组)。

success: function (data) {

  $.each(data.ImageUrls, function (index, item) {    
     files.push(item));         
  });
},

此外，如果您想从 getFiles() 方法返回图像 url 数组，则无需在 document.ready 事件中定义它。你可以在外面定义它。您也可以考虑使用getJSON()方法基本上是使用 dataType:'json'

的简写 ajax 调用

$(function(){
   //Call some method as need (ex:initializing some plugin ,add some event handlers etc.)
});

function getFiles() {
   var files = [];
   var myUrl = '@Url.Action("filesinfolder", "Home")';

   $.getJSON(myUrl ,function(data){

      $.each(data.ImageUrls, function (index, item) {    
         files.push(item));         
      });

   });     
   return files;
}

此外，如果您想将数组传递给 initialPreview 属性，只需调用 getFiles() 方法即可。不需要在其周围使用 []。由于 ajax 是异步的，我建议首先调用 getFiles() 方法，然后调用将其传递到您需要的任何地方。

$(function(){

   var urlsArray=getFiles();
   $("#id").fileinput({
     //existing code 
      initialPreview: urlsArray,
     //existing code 
   });

});