如何获得前端的文件网址上传的文件

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]]); 
      } 
     }, 

--update＃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

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

看起来readAsDataUrl是你想要的。

Answer 2

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

这段代码或多或少是directly from MDN。增加了一些评论来澄清（希望）在哪里发生了什么。

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); 
 
    } 
 
}

<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