码迷,mamicode.com
首页 > Web开发 > 详细

上传在线预览

时间:2018-01-25 10:57:35      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:20px   button   onchange   ntb   box   att   _id   git   def   

一、预览图片(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>

上传在线预览

标签:20px   button   onchange   ntb   box   att   _id   git   def   

原文地址:https://www.cnblogs.com/MissRabbit/p/8349721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!