如何獲得前端的文件網址上傳的文件

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