在 chrome 上上传之前显示 pdf 的预览答案

【问题标题】：Display a preview of a pdf before upload on chrome在 chrome 上上传之前显示 pdf 的预览
【发布时间】：2017-07-15 09:32:11
【问题描述】：

我想在上传前显示 pdf 的预览。它适用于Firefox，但不适用于chrome。如果我尝试使用图像，它适用于两者。

这是我的代码：

<input required="required" accept="image/*, application/pdf" class="uploadjs" data-id="3" type="file">

<div class="preview">
  <img id="preview-3" alt="">
  <embed id="preview-3_1" type="application/pdf">
</div>


function readURL(input, id) 
{
    var mime= input.files[0].type;

    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();

        reader.onload = function (e) 
        {
            if(mime.split("/")[0]=="image")
            {
                $('#preview-'+id+'_1').attr('src', '');
                $('#preview-'+id).attr('src', e.target.result);

            }
            else
            {
                $('#preview-'+id).attr('src', '');
                $('#preview-'+id+'_1').attr('src', e.target.result);
            }
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$(function()
{
    $(".uploadjs").change(function()
    {
        var id = $(this).data('id')
        readURL(this, id);
    });
})

还有一个 jsfiddle：https://jsfiddle.net/g9ttqxyj/2/

我尝试了多种想法，例如：嵌入、iframe 和对象，但没有一个适用于 chrome。

【问题讨论】：

你应该使用 iframe：stackoverflow.com/questions/7126089/…
我试过了，还是不行：/
你现在解决了吗？
不，抱歉，chrome 用户哎呀...

标签： javascript html google-chrome pdf

【解决方案1】：

对于任何偶然发现此问题的人：用对象标签封装您的嵌入标签。对象标签的数据属性必须链接到 .pdf。将html更改为：

<object type="application/pdf" data ="#" id="pdfViewer">
    <embed id="preview-3_1" type="application/pdf">
</object>

将此添加到您的 jquery 中：

$('#pdfViewer').attr('data',  e.target.result);

https://stackoverflow.com/a/23681394

【讨论】：