如何从包含数组的JSON对象显示文件?

时间:2017-08-01 11:45:34

标签: json asp.net-core-mvc

下面是我的json对象,它被返回。正如你所看到的,我有一个名为" DocumentVersions"使用我想要显示的文件的blob地址。在成功功能我想在div下显示图像。我试过循环,但我不知道如何显示图像。我可以返回多个文件。

{
   "FileUploadID":"27",
   "DocumentVersions":[
  {
     "Active":true,
     "DocumentVersionID":"5",
     "FileName":"Logo0112.png",
     "ContentLength":18846,
     "ContentType":"image/png",         "
     "RevisionNumber":0,
     "RevisionDate":"2017-08-01T12:24:04.7748026+01:00",                       
     "Blob":"https://address/documents/75755df4af5f.png",         
     "BlobFileName":75755df4af5f.png"        

  }
   ],
   "success":true,
   "id":"27",
   "message":"The Files have been uploaded"
 }

这是我的成功功能。在哪里我得到了一个“看不懂的财产”的Blob'未定义'

      myDiv.on("complete", function (data) {

                res = JSON.parse(data.xhr.responseText);

                console.log(res);

                if (res.success == true) {

                    for (var key in res) {
                        var optionhtml = '<p="' + res[key].FileUploadID + 
                      '">' + res[key].DocumentVersions.Blob + '</p>';
                        $(".test").append(optionhtml);

                    }                        
                }
                else {
                    alert(res.message);
                }

            });

2 个答案:

答案 0 :(得分:0)

如您所见,DocumentVersions不是一个对象,它是一个包含对象的数组(在这种情况下只有一个对象)。

    {
   "FileUploadID":"27",
   "DocumentVersions":[

  {
     "Active":true,
     "DocumentVersionID":"5",
     "FileName":"Logo0112.png",
     "ContentLength":18846,
     "ContentType":"image/png",         "
     "RevisionNumber":0,
     "RevisionDate":"2017-08-01T12:24:04.7748026+01:00",                       
     "Blob":"https://address/documents/75755df4af5f.png",         
     "BlobFileName":75755df4af5f.png"        

  }

   ],
   "success":true,
   "id":"27",
   "message":"The Files have been uploaded"
 }

您需要在数组中指定要获取数据的内部对象:

 res[key].DocumentVersions[0].Blob

答案 1 :(得分:0)

感谢您的帮助,我通过使用以下代码解决了我的问题,这让我可以获取图像文件并显示。

                        res.DocumentVersions.forEach(function (obj) {
                        var img = new Image();
                        img.src = obj.Blob;
                        img.name = obj.FileName;
                        img.setAttribute("class", "fileLoad");                           
                        $("#fileupload").append(img);
                    });