当上传pdf文件时，我想在我的图钉上显示pdf图标。

Question

我试图对它进行研究，但没有找到任何解决办法。我是javascript的新手，所以我的函数可能做错了什么。当我们上传pdf文件时，我想在我的缩略图上显示一个pdf图标。除了pdf外，它将显示我们上传的图片，请协助我。

这是我的JavaScript：

function readURL(input, imgno) {

    if (input.files && input.files[0]) {

        var imgPath = input.files[0].value;
        var ext = $(input).val().split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'pdf']) == -1) {
            MsgBox('Message', 'Only file with extension ".jpg", ".jpeg" , ".png" , ".gif", ".pdf"  are allowed');
            
            $(input).filestyle('clear');
        } else {

            if (input.files[0].size > 1024000) {
                MsgBox("Message", "Uploaded File <b> " + input.files[0].name + "</b>  " + input.files[0].size / 1000 + "KB");
                //bootstrap_alert.warning('#sender-alert', "Uploaded File <b> " + input.files[0].name + "</b>  " + input.files[0].size / 1000 + "KB");
                'data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAA‌​LAAAAAABAAEAAAICRAEAOw%3D%3D').attr("title", "");
                $(input).filestyle('clear');
            
                return;
            }
        }
        var image_holder = $("#image-holder" + imgno);
        image_holder.empty();

        var filename = input.files[0].name;
        //var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        //if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
        var reader = new FileReader();

        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "thumb-image",
                "title": filename,
                "width": "100",
                "height": "100"
            }).appendTo(image_holder);
            // $(this).children('a').addClass('active').end()

            $("<button />", {
                "class": "btn btn-default glyphicon glyphicon-trash btn-sm",
                "type": "button",
                "onclick": "ClearImage('" + imgno + "')"
            }).appendTo(image_holder);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

以下是我的HTML：

var base1 = string.Empty; var base2 = string.Empty; var base3 = string.Empty; var base4 = string.Empty; var base5 = string.Empty;
var imgSrc1 = string.Empty; var imgSrc2 = string.Empty; var imgSrc3 = string.Empty; var imgSrc4 = string.Empty; var imgSrc5 = string.Empty; ;

if (Model.Picture1 != null) { base1 = Convert.ToBase64String(Model.Picture1); imgSrc1 = String.Format("data:image/gif;base64,{0}", base1); }
else { base1 = "#"; }

if (Model.Picture2 != null) { base2 = Convert.ToBase64String(Model.Picture2); imgSrc2 = String.Format("data:image/gif;base64,{0}", base2); }
else { base2 = "#"; }

if (Model.Picture3 != null) { base3 = Convert.ToBase64String(Model.Picture3); imgSrc3 = String.Format("data:image/gif;base64,{0}", base3); }
else { base3 = "#"; }

if (Model.Picture4 != null) { base4 = Convert.ToBase64String(Model.Picture4); imgSrc4 = String.Format("data:image/gif;base64,{0}", base4); }
else { base4 = "#"; }

if (Model.Picture5 != null) { base5 = Convert.ToBase64String(Model.Picture5); imgSrc5 = String.Format("data:image/gif;base64,{0}", base5); }
else { base5 = "#"; }




<div class="gallery" id="gallery">
    <ul class="enlarge clearfix list-inline" id="tempenlarge">
        <li>
            <div id="image-holder1">
                <img class="img-thumbnail thumbnail-size" src='@imgSrc1' width="100" height="100" id="image1" />
                <button class="btn btn-default glyphicon glyphicon-trash btn-sm" onclick="ClearImage('1')" type="button" />
            </div>
            <input id="file-1" name="uploadImages" type="file" accept="image/x-png, image/gif, image/jpeg, image/pdf" onchange="readURL(this, '1');" class="filestyle form-control " data-buttontext="GOV ID" data-buttonname="btn-primary" data-size="xs">
        </li>
        <li>
            <div id="image-holder2">
                <img class="img-thumbnail thumbnail-size" src='@imgSrc2' width="100" height="100" id="image2" />
                <button class="btn btn-default glyphicon glyphicon-trash btn-sm" onclick="ClearImage('2')" type="button" />
            </div>
            <input id="file-2" name="uploadImages" type="file" onchange="readURL(this, '2');" class="filestyle" data-buttontext="DOCUMENT 1" data-buttonname="btn-primary" data-size="xs">
        </li>
        <li>
            <div id="image-holder3">
                <img class="img-thumbnail thumbnail-size" src='@imgSrc3' width="100" height="100" id="image3" />
                <button class="btn btn-default glyphicon glyphicon-trash btn-sm" onclick="ClearImage('3')" type="button" />
            </div>

            <input id="file-3" name="uploadImages" type="file" onchange="readURL(this, '3');" class="filestyle" data-buttontext="DOCUMENT 2" data-buttonname="btn-primary" data-size="xs">
        </li>
        <li>
            <div id="image-holder4">
                <img class="img-thumbnail thumbnail-size" src='@imgSrc4' width="100" height="100" id="image4" />
                <button class="btn btn-default glyphicon glyphicon-trash btn-sm" onclick="ClearImage('4')" type="button" />
            </div>

            <input id="file-4" name="uploadImages" type="file" onchange="readURL(this, '4');" class="filestyle" data-buttontext="DOCUMENT 3" data-buttonname="btn-primary" data-size="xs">
        </li>
        <li>
            <div id="image-holder5">
                <img class="img-thumbnail thumbnail-size" src='@imgSrc5' width="100" height="100" id="image5" />
                <button class="btn btn-default glyphicon glyphicon-trash btn-sm" onclick="ClearImage('5')" type="button" />
            </div>

            <input id="file-5" name="uploadImages" type="file" onchange="readURL(this, '5');" class="filestyle" data-buttontext="DOCUMENT 4" data-buttonname="btn-primary" data-size="xs">

        </li>
    </ul>
</div>

Answer 1

这个答案是在OP更新问题之前写的，但解决方案仍然适用。

更新

在一项评论中，“任择议定书”要求提供进一步的援助。在检查了代码之后，我发现了6个致命的错误，这些错误阻碍了它的工作。此外，代码需要3个小修改才能显示问题中要求的默认PDF图像。带注释的更正代码可在以下位置找到：JSFiddle

小提琴只包括最小的更改，以使代码工作。

问题

我们希望显示用户选择上传的文件的缩略图。当文件是图像类型时，我们可以使用dataURL来显示实际的图像。但是，我们不能以同样的方式显示PDF文件的缩略图。虽然从PDF的第一页生成图像是可能的，但这是一个复杂而冗长的过程。因此，作为一种简单的选择，我们希望对PDF文件使用默认的缩略图。

溶液

file对象具有一个类型属性，我们可以使用它来确定它是图像还是其他类型的文件。类型值将以gif、png、jpg和其他映像的"image/“开头。对于PDF，它将是“应用程序/pdf”。

因此，使用条件(三元)算子，我们可以为图像选择dataURL (target.result)，也可以为其他文件类型选择默认图像。在这种情况下，我们只有一个PDF和一个默认图像，但它可以被扩展为显示不同文件类型的不同图像。

let src = file.type.startsWith("image") ? e.target.result : defaultImage;

这是在选择图像和PDF后的示例输出：

​

​

片段

与原始代码不同，代码片段使用模板文字显示缩略图和元数据。但是，src变量可以很容易地添加到OP的现有代码中。

​

function readURL(input, imgno) {

  let file = input.files[0];

  // file validation code not shown

  var reader = new FileReader();

  reader.onload = function(e) {

    let src = file.type.startsWith("image") ? e.target.result : defaultImage;
    let size = (file.size / 1024).toFixed(0);
    let date = new Date(file.lastModified).toLocaleDateString();
  
    $("#image-holder").append(`
      <div id="image-holder-${imgno}" class="list-group-item">
        <div class="row">
          <div class="col-3">
            <img src="${src}" class="thumb-image">
          </div
          <div class="col">
            <ul style="font-size:small">
              <li>Filename: ${file.name}</li>
              <li>Type: ${file.type}</li>
              <li>Size: ${size} kb</li>
              <li>Date: ${date}</li>
              <li><a href="#">Remove</a></li>
            </ul>
          </div>
        </div>
      </div>
    `);

  }
  reader.readAsDataURL(file);
}



let defaultImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/833px-PDF_file_icon.svg.png";


upload.addEventListener("change", function(e) {
  readURL(this, 1);
});

body {
  font-family: sans-serif;
}
.thumb-image {
  height: 100px;
  width: auto;
  border: 1px solid lightgray;
}

<input type="file" id="upload" accept="application/pdf,image/*">
<hr/>
<div id="image-holder" class="list-group"></div>

<!-- Bootstrap 4 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

​