Question

- UPDATE -

所以我正在尝试创建一个文件预览器，允许某人在前端上传文件，以blob形式访问浏览器文件，并在iframe中预览它们。

必须预览所有开放的文件

我目前的问题是 viewer.js （http://viewerjs.org/instructions/）似乎无法使用blob文件。这是我收到的最近的信息.. https://github.com/kogmbh/ViewerJS/issues/230

关于如何使用所有打开的文档文件的任何想法？插件推荐？

以下当前代码..

    fileUploadProcessFiles: function(fileInput){
            console.log("MODALJS.fileUploadProcessFiles");
            var m = $(document).find("#modal"),
                list = $("#uploadList"),
                files = fileInput.files,
                type = m.find("option:selected").text();

            for (var i = 0; i < files.length; i++) {
                // Display List
                list.append(`<div class='hundredWidth'>"+
                                <label class='autoWidth underline'>${type}</label><label class='cancelIconSmall inlineBlock' onclick='MODALJS.fileUploadRemoveFile(this)' style='margin-left: 10px'></label>
                                <label class='oneWide'>${files[i].name}</label>"
                          </div>`);

                // Store Preview Links
                var blobURL = URL.createObjectURL(files[i]);
                MODALJS.fileUploadPreviewLinks.push(blobURL);
                // Append Iframe Preview
                list.append(`<iframe src="${MODALJS.fileUploadPreviewLinks[i]}" allowfullscreen webkitallowfullscreen width="400px" height="400px"></iframe>`);
                // Push to upload queue
                MODALJS.fileUploadFiles.push(["file", files[i]]);
            }
        },

- 更新＃2 -

所以我明白了。我不得不使用不同的插件。而不是webODF ......我现在应该能够拼凑出足够好的解决方案。

fileUploadProcessFiles: function(fileInput){
            console.log("MODALJS.fileUploadProcessFiles");
            var m = $(document).find("#modal"),
                list = $("#uploadList"),
                files = fileInput.files,
                type = m.find("option:selected").text();

            for (var i = 0; i < files.length; i++) {
                // Display List
                list.append(`<div class='hundredWidth'>"+
                                <label class='autoWidth underline'>${type}</label><label class='cancelIconSmall inlineBlock' onclick='MODALJS.fileUploadRemoveFile(this)' style='margin-left: 10px'></label>
                                <label class='oneWide'>${files[i].name}</label>"
                          </div>`);

                // Store Preview Links
                var blobURL = URL.createObjectURL(files[i]);
                MODALJS.fileUploadPreviewLinks.push(blobURL);
                // Append Iframe Preview

                list.append(`<div id="odfCanvas"></div>`);
                odfElement = document.getElementById("odfCanvas");
                odfcanvas = new odf.OdfCanvas(odfElement);
                odfcanvas.load(blobURL);
                // Push to upload queue
                MODALJS.fileUploadFiles.push(["file", files[i]]);
            }

        },

Answer 1

上传的文件没有网址。至少不在传统的资源定位器中＃34;感。您可以通过FileReader.result属性访问该文件。

此代码段或多或少directly from MDN。添加了一些评论以澄清（希望）发生了什么。

＆＃13;

function previewFile() {
  var preview = document.getElementByID('preview');
  var file    = document.getElementByID('upload').files[0];
  var reader  = new FileReader();

  // listen for 'load' events on the FileReader
  reader.addEventListener("load", function () {
    // change the preview's src to be the "result" of reading the uploaded file (below)
    preview.src = reader.result;
  }, false);

  // if there's a file, tell the reader to read the data
  // which triggers the load event above
  if (file) {
    reader.readAsDataURL(file);
  }
}

＆＃13;

<input id="upload" type="file" onchange="previewFile()"><br>
<img id="preview" src="" height="200" alt="Image preview...">

＆＃13;

评论问题更新：PDF很棘手。好吧，任何在浏览器中原生呈现的东西都会变得棘手或不可能。您可以尝试使用URL.createObjectURL(file)，然后将其作为iframe的来源，以触发浏览器的非常原生的PDF渲染。您也可以尝试使用Mozilla pdf.js

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

看起来readAsDataUrl就是你想要的。

如何获取前端上传文件的文件URL

2 个答案: