10行代码搞定前台上传附件(pdf) 在线预览功能

一.整体思路

开始想象的很麻烦，但实际实现了很简单！注意这里是预览的pdf文件，其他格式没有试过！思路如下：

1.准备所需工具--一个type为file的输入框，一个充当预览按钮的a标签。（没错，就这两样！）

2.在上传文件之前，预览按钮是隐藏的。通过点击上传文件，会触发input的onchange事件，我们在这个事件里面做下处理

3.所谓处理，就是给预览按钮动态设置href属性为文件的预览地址，href值是一个链接，因此我们只要获取上传文件的地址链接即可

4.关于获取文件地址链接，用FileReader文件读取器的readAsURL即可！

二.实现代码

1.首先我们放一个文件输入框！

1）type为file，因为要上传文件

2）accept为文件上传类型，这里规定只能上传pdf格式
<input id="addFile" type="file" accept="application/pdf">
2.紧接着，我们定义一个预览按钮

1)当点击按钮时预览时新打开页面，因此target="_blank"

2)display为none，当选择文件后才动态显示预览按钮
<a href="javascript:void(0);" id="previewFile" target="_blank"
style="display:none">预览</a>
3.接下来给文件输入框注册change()事件，选择文件后触发
$('#addFile').on('change',function(){ var file =
$('#addFile').get(0).files[0];//获得传至input的文件
$('#previewFile').css("display","block");//显示预览按钮 var reader = new
FileReader();//文件读取器 reader.readAsDataURL(file);//获取文件URL,结果存至reader.result
reader.onload = function() {//文件正常读取结束(此时reader.result才有值)
$("#previewFile").attr("href",reader.result);//把URL结果直接给<a>的href属性 };
注意
：只有在reader.onload的方法里才可以读到reader.result！在外面读取的话是null；因此对结果的操作一定要放到 reader.onload中！

END!这样文件的url就在预览按钮的href中了，点击预览按钮就可以预览文件了！

感慨：其实思路清晰了，实现也很简单，思路不清晰就不知道如何做了；我也查了好多相关资料，许多长篇大论的，看起来很麻烦，甚至不符合我要做的功能需求，有了大体思路，在查下例如：FileReader如何获取文件url，或者如何获取input输入框上传的文件之类的问题，会快很多！

——————————————————————————————————————————————————————

2018-11-28 补充：

以上方法存在兼容性问题，在Chrome中单击预览按钮无法预览，但右键新页面打开却可以。

报错：Not allowed to navigate top frame to data URL

原因是<a>标签的href值如果是 <https://www.cnblogs.com/ziyunfei/p/6753002.html>Data
URL，则无法点开，这点是Chrome出于安全性考虑，许多钓鱼网站都是利用Data URL把真实网页的全部内容复制到url中，同时Data
URL可以伪造头部成想要冒充的网址，更具有欺骗性；

为了解决这个问题，我们可以不通过设置href来实现预览，而是给<a>添加点击事件，点击事件里再处理预览功能。

代码如下：
$("#previewFile").on('click',function(){ var win = window.open();
win.document.write('<body style="margin:0px;"><iframe src="'+reader.result+'"
scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></body>');
});
思路是通过 window.open()打开新页面，紧接着在新页面里通过<iframe>的src属性把内容写入~

热门工具换一换

10行代码搞定 前台上传附件(pdf) 在线预览功能