One, preview picture (BLOB)
<div> <input class= "Easyui-filebox"
labelposition= "Top"
data-options= "ButtonText: ' Select File ', 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 ()" > Appointment </a> </img></div>//when uploading, event triggered
function View_file (_obj) {//Gets the path of the currently uploaded file var _filepath = $ (_obj). Filebox ("GetValue"); var _file = document.getElementById (' filebox_file_id_1 '). Files[0]; $ (' #pdf_view '). attr ("src", Getobjecturl (_file))
}//gets file's local browser corresponding path 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;}
Second, PDF preview ( 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>
Upload Online preview