打开用户选择的文件

Question

我有下面的代码，如果用户需要，我想在新选项卡或打开文件中显示添加的 pdf（使用输入元素）。

这可能吗？

<div class="uploadButtonSection">
   <input type="image" src="clip.png" ngf-select="uploadFiles($files)" multiple
            accept="application/pdf" ngf-max-height="1000" ngf-max-size="5MB" class="uploadIcon"/>

 <ul class="uploadList">
    <li ng-repeat="file in files" style="font:smaller">   
       <div class="attachmentIcon">
         <a href="#" target="_blank"><img src="pdf-icon.png"></a>
         <div class="customBtn" ng-click="removeFile(file)">Remove</div>
            {{file.name}}
       </div>     
    </li>
 </ul>
</div>

Answer 1

您可以使用 URL.createObjectURL 并将您的 selected 文件传递给它。

let url = URL.createObjectURL(selectedFile);
window.open(url, "_blank");

这里有一个 fiddle 供您快速了解要点。

但问题是大多数浏览器会阻止您在 select 文件后打开新选项卡。 <<弹出窗口已阻止>>

您可以尝试显示一些按钮来打开该文件。有点类似于 this fiddle，但我不确定这是否适用于所有情况。

打开用户选择的文件

Opening file selected by the user

html

javascript

angularjs

ng-file-upload