上传在线预览

Posted 2020-10-22 missrabbit

一、预览图片（blob）

<div>
    <input class="easyui-filebox" 
 　　　　　　labelPosition="top" 
　　 　　　　data-options="buttonText:‘选择文件‘, accept:‘application/pdf‘,onChange:function(){view_file(this)} " 
　　 　　　　style="width:90%">
<div>
<div style="margin-top:20px">
　　<a href="#" class="easyui-linkbutton" style="width:30%" onclick="upload_file()">预约</a>
　　<img id="pdf_view"></img>
</div>

// 上传时，触发的事件
function view_file(_obj) {
　　// 获取当前上传的file的路径
　　var _filepath = $(_obj).filebox("getValue");
　　var _file = document.getElementById(‘filebox_file_id_1‘).files[0]; 
　　$(‘#pdf_view‘).attr("src", getObjectURL(_file))	
}
// 获取file的本地浏览器对应路径
function getObjectURL(_file) {
　　var url = null;
　　if (window.createObjectURL != undefined) {
　　　　url = window.createObjectURL(_file);
　　} else if (window.URL != undefined) {
　　　　url = window.URL.createObjectURL(_file);
　　} else if (window.webkitURL != undefined) {
　　　　url = window.webkitURL.createObjectURL(_file);
　　}
　　return url;
}          

二、pdf 预览（jquery.metadata.js）

http://jquery.malsup.com/media/

http://jquery.malsup.com/media/misc.html

<script type="text/javascript" src="http://github.com/malsup/media/raw/master/jquery.media.js?v0.92"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>

...

<a class="media" href="guice.pdf">PDF File</a>
<a class="media {type: ‘html‘}" href="../">HTML File</a>