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&