纯前端 文件预览方法汇总

        以下是通过javaScript的方法实现文件预览的方法汇总：

1.使用HTML5的File API和Canvas来预览图片文件：

  Image Preview          document.getElementById('fileInput').addEventListener('change', function() {      var file = this.files[0];      var reader = new FileReader();      reader.onload = function(e) {        document.getElementById('previewImage').src = e.target.result;      };      reader.readAsDataURL(file);    });  

2.使用HTML5的File API和Video标签来预览视频文件：

  Video Preview          document.getElementById('fileInput').addEventListener('change', function() {      var file = this.files[0];      var reader = new FileReader();      reader.onload = function(e) {        document.getElementById('previewVideo').src = e.target.result;      };      reader.readAsDataURL(file);    });  

3.使用第三方库如PDF.js来预览PDF文件：

  PDF Preview            document.getElementById('fileInput').addEventListener('change', function() {      var file = this.files[0];      var reader = new FileReader();      reader.onload = function(e) {        var fileData = new Uint8Array(e.target.result);        pdfjsLib.getDocument({data: fileData}).promise.then(function(pdf) {          pdf.getPage(1).then(function(page) {            var scale = 1.5;            var viewport = page.getViewport({ scale: scale });            var canvas = document.createElement('canvas');            var context = canvas.getContext('2d');            canvas.height = viewport.height;            canvas.width = viewport.width;            var renderContext = {              canvasContext: context,              viewport: viewport            };            page.render(renderContext).promise.then(function() {              document.getElementById('previewPDF').src = canvas.toDataURL();            });          });        });      };      reader.readAsArrayBuffer(file);    });