uploadify文件上传以及预览

最新推荐文章于 2021-02-24 13:24:05 发布

原创

最新推荐文章于 2021-02-24 13:24:05 发布 · 644 阅读

1 ·

CC 4.0 BY-SA版权

项目中采用uploadify进行文件上传，并利用poi实现文件预览功能。首先通过OpenOffice启动cmd进行配置，接着在jsp页面中设置uploadify的相关属性。文件上传后，通过documentView.jsp页面进行在线预览。后台有专门的判断后缀方法，并利用工具类DocConvert启动OpenOffice应用完成文件格式转换。

项目中利用poi实现预览基本步骤:（其他的导入jar包什么的在别人资料上可以找到，我实现这个功能也是借鉴+实践才成功的~我提供的只是我接触项目的思路和代码。见谅！【滑稽】）

先pdf，然后swf

安装OpenOffice后启动cmd：C:/Program Files (x86)/OpenOffice 4/program/soffice.exe -headless -accept=\"socket,host=127.0.0.1,port=8100;urp;\"

安装路径：C:/Program Files (x86)/OpenOffice 4/program/soffice.exe ；

1.（jsp页面中）项目中uploadify上传js格式

使用uploadify需要导入uploadify.css、jquery.uploadify.min.js等jar包，在官方domes有，嗯，有，还有各种属性；

$('#file_upload').uploadify({
				'swf' : '${ctx}/js/uploadify3.2.1/uploadify.swf',
				'uploader':'${ctx}/upload/uploadAction!uploadFile?jsessionid='+"<%=request.getParameter("fkId")%>",
				'buttonText' : '添加,
				'buttonClass' : 'uploadify',
				'fileObjName' : 'uploadify',
				'formData' : {'fkId' : '${fkId}'},
		        'onUploadSuccess' : function(file, data, response) {
		        
		        }
			});
		});

2.js中调用预览的方法（只是提供一个js方法，放在jsp那里自己看咯）

	function preview(id) {
			var param = '';
			if(typeof id!='undefined')
				param = '&id='+id;
			var url='${ctx}/jsp/file/documentView.jsp?fkId='+fkId+param;
			window.top.art.dialog.open(url,{title:"在线预览",width:'80%',height:'90%',lock:true,opacity:0.3,button: [ { name: '关闭', callback: function () {return true; }, focus: true }]});
	}

3.documentView.jsp页面(项目数据)上面js方法中在线预览内填充的页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/jqueryhead.jsp" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%;width: 100%;">	
    <head> 
        <title></title>         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <style type="text/css"> 
			html, body	{ height:100%; }
			body { margin:0; padding:0; overflow:hidden; }   
/* 			#flashContent{display: none;} */
			#imgFile{
				width: 100%;
				height: 100%;
				display: none;
			}
			.module{
				display: none;
			}
        </style> 

		<script type="text/javascript" src="${ctx}/jsp/file/js/swfobject/swfobject.js"></script>
		<script type="text/javascript" src="${ctx}/jsp/file/js/flexpaper_flash.js"></script>

		<script type="text/javascript">
		var imgSuffix="bmp,jpeg,gif,psd,png,tiff,tga,eps,jpg";	//常用图片文件格式
		var mp4Suffix="mp4,avi,flv,rmvb,3gp";	//常用视频格式
		var officeSuffix="txt,doc,xls,ppt,pdf,dwg,exb,docx,xlsx,pptx,wps,et,dps,html,xml,swf";
		$(function(){
			var fkId="${param.fkId}";
			var ids="${param.id}";
			console.log("documentView.jsp:"+fkId+"-----");
			
			//var ids="${param.id}";
			//读取文件格式
			$.ajax({
				url:'${ctx}/upload/uploadAction!getFileStaff?ids='+ids,
				type:'post',
				data: "idd="+fkId ,
				async:false,
				success:function(data){
				console.log(data);
				
					data=eval('('+data+')');
					if(data.isExists=="false"){
						loadNoP(1);	//文件不存在
					}else{
						var id=data.id;
						var pt=data.realName;
						var staff=data.extension;//文件格式
						console.log(id+"--"+staff+"==="+officeSuffix.indexOf(staff)+"----"+imgSuffix.indexOf(staff));
						if(imgSuffix.indexOf(staff)!=-1){	//是否是图
							
							loadImage(pt);
						}else if(officeSuffix.indexOf(staff)!=-1){		//可预览
							
							loadDocument(pt);
						}else{
							loadNoP(0);
						}
					}
				}
			});
		});
		/**
		*预览图片 不需要转换
		*/
		function loadImage(pt){
			$(".module").hide();
			console.log(pt+"////