javascript - 在 jquery 中显示图像无法正常工作

Question

上传图像后，我想要的是显示该图像。当图像的扩展名是 .jpg 时，它可以正常工作。但是，当我上传 pdf 文件时，它会上传，但不会显示该文件。

JQUERY

function setImagesSitePlot(JsonObject) {
for (i = 0; i < JsonObject.length; i++) {
    var obj = JsonObject[i].Filename;
    var obj2 = "ImgSitePlotManual";
    var obj3 = JsonObject[i].FileType;
    var dataImageName = JsonObject[i].ImageName;

    var ImgObj = parent.document.getElementById(obj2);
    ImgObj.src = SharedFilePath + obj;
    $(ImgObj).attr("data-imagename", dataImageName);
}

}

HTML

<img width="500" class="img-responsive" id="ImgSitePlotManual" data-imagename="" style="width: 606px;" />

Answer 1

您必须使用表示 pdf 文件图标的图像，一旦上传的文件为 pdf，您就在 JSON 字符串中返回该图标。

或者您可以在 object 元素中显示 pdf 文件:

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px' id='PdfSitePlotManual'>

您无法查看图像中的 pdf。

利用您已经返回的fileType属性:

for (i = 0; i < JsonObject.length; i++) {
    var obj = JsonObject[i].Filename;
    var obj3 = JsonObject[i].FileType;
    var dataImageName = JsonObject[i].ImageName;

    if(obj3 == 'img')
    {
       var ImgObj = parent.document.getElementById("ImgSitePlotManual");
       ImgObj.src = SharedFilePath + obj;
       $(ImgObj).attr("data-imagename", dataImageName);
    }

    else if(obj3 == 'pdf')
    {
       var PdfObj = parent.document.getElementById("PdfSitePlotManual");
       PdfObj.setAttribute('data', SharedFilePath + obj);
    }
}