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

Question

-更新--

因此，我试图创建一个文件预览器，允许用户上传前端的文件，以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

上传的文件没有URL。至少在传统的“资源定位器”意义上并非如此。您可以通过FileReader.result属性访问该文件。

这个片段或多或少是直接来自MDN。添加了一些评论，以澄清(希望)在哪里发生了什么。

​

function previewFile() {
  const preview = document.getElementById('preview');
  const file = document.getElementById('upload').files[0];
  const 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);
  }
}

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

​

更新的评论问题：PDF是棘手的。嗯，任何在浏览器中本机呈现的东西都将是棘手的或不可能的。您可以尝试URL.createObjectURL(file)，然后将其作为iframe的源来触发浏览器的非本地PDF呈现。你也可以试试Mozilla的pdf.js

Answer 2

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

看起来readAsDataUrl就是你想要的。