您的位置: 首页  >  文章  >  AjaxUpload实现文件上传+LibreOffice文件转码+flexPaper文件在线预览

AjaxUpload实现文件上传+LibreOffice文件转码+flexPaper文件在线预览

分类: 文章 • 2025-04-08 23:24:16

AjaxUpload实现无刷新效果的文件上传。

<script src="${request.getContextPath()}/application/js/jquery.fileupload.js"></script>
首先引入js文件 

upload: function () {

    var button = document.getElementById("xgk_uploadButton");

    // var regexp = /^(png|jpg|gif|doc|docx|pdf|zip|rar)$/;
    new AjaxUpload(button, {
        //上传是需要进行转码
        action: contextPath + "/xgkUpload/uploadFile.do",
        name: 'uploadfile',
        onSubmit: function (file, ext, size) {

            if (size > 100 * 1024 * 1024) {
                Message.info({
                    text: '上传附件超过最大限制100M!',
                    error: true,
                    timeout: 2,
                    layout: 'center'
                });
                return false;
            }
            var realLength = file.length;
            if (realLength > 50) {
                Message.info({
                    text: '文件名长度不能超过50，请重新上传!',
                    error: true,
                    timeout: 2,
                    layout: 'center'
                });
                return false;
            }
            Message.waiting('正在努力上传...');
        },
        onComplete: function (file, result) {
            result = jQuery.parseJSON(jQuery(result).text());
            if (result.overSize) {
                Message.info({
                    text: '上传附件超过最大限制100M!',
                    error: true,
                    timeout: 1,
                    layout: 'center'
                });
                $("#uploadButton" + index).css("background", "#0c7bea");
                return false;
            }
            // 成功之后隐藏loading,并提示上传成功
            Message.hide();
            Message.info({
                text: '上传成功',
                timeout: 2,
                layout: 'center'
            });

        }
    });
}

以上是使用Ajax上传的前端代码

处理上传文件的控制器

 @RequestMapping(method = RequestMethod.POST,value="/uploadFile")
 public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {
    JSONObject result = new JSONObject();
   CommonsMultipartFile file = (CommonsMultipartFile) ((DefaultMultipartHttpServletRequest) request)
            .getFile("uploadfile");
    if (StringUtils.isBlank(curUserId)) {
        response.setStatus(HttpCodeConstants.UNAUTHORIZED);
        return;
    }
    if (file == null) {
        sendErrorMessage(response, MODULE_RESOURCE_XSPY, "content", HttpCodeConstants.ERROR_CODE_NOT_EXIST);
        return;
    }
    if (file.getSize() > XgkConstant.MAX_INFORM_FILESIZE) {
        result.put("overSize", "true");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/plain");
        response.getWriter().print(JSONObject.toJSONString(result));
        response.getWriter().flush();
    } else {
        XgkCareerCourseFileDTO xgkCareerCourseFileDTO = xgkUploadService.uploadResource(file, curUserId);
        //得到转码后的路径
        String destflashpath = xgkCareerCourseFileDTO.getThumbnailsUrl();
        //得到根路径
        String basepath = VFSUtil.getVFSRootPath();
        //进行转码，将文件转成swf格式
        String swfPath = basepath + destflashpath;
        try {
	//已知文件的路径和文件转码的路径进行转码
           ConvertOffice.doc2swf(basepath + xgkCareerCourseFileDTO.getFilePath(), swfPath);
result.put("success", true); result.put("fileInfo", xgkCareerCourseFileDTO); } catch (Exception e) { result.put("success", false); result.put("msg", "上传失败，转码服务异常，请稍后重试！"); e.printStackTrace(); } 
//在文件服务器上删除原来的文件
        VFSUtils.removeFile(xgkCareerCourseFileDTO.getFilePath());
        VFSUtils.removeFileAndDir(xgkCareerCourseFileDTO.getFilePath());
        response.setContentType("text/html;charset=UTF-8");
        response.setContentType("text/plain");
        response.getWriter().print(JSONObject.toJSONString(result));
        response.getWriter().flush();
    }
}
文件上传的service层，对文件名和路径进行处理 

  public XgkCareerCourseFileDTO uploadResource(MultipartFile file, String curUserId) throws IOException {
        //处理图片文件的名
        String originalFilename = file.getOriginalFilename();
        int index = originalFilename.lastIndexOf(".");
        String suffix = null;
        if (index >= 0) {
            suffix = originalFilename.substring(index + 1);
            //resourceName = originalFilename.substring(0, index);
        }
        //计算文件的MD5
        String md5 = generateMD5(file.getInputStream());
        if (md5 == null)
            return null;
        String filePath =  getRelativePath(md5) + "." + suffix;
        if (!VFSUtils.isFileExist(filePath)) {
            try {
                VFSUtils.saveFile(file, filePath);
            } catch (FileOperationException e) {
                return null;
            }
        }
       // filePath= filePath;
        XgkCareerCourseFileDTO xgkCareerCourseFileDTO = new XgkCareerCourseFileDTO();
        //文件名
        xgkCareerCourseFileDTO.setFileName(originalFilename);
        //文件路径
        xgkCareerCourseFileDTO.setFilePath(filePath);
        //文件后缀名
        xgkCareerCourseFileDTO.setFileSuffix(suffix);
        //文件大小
        xgkCareerCourseFileDTO.setFileSize(file.getSize());
        //文件MD5
        xgkCareerCourseFileDTO.setMd5(md5);
        xgkCareerCourseFileDTO.setTransFlag(0);
        xgkCareerCourseFileDTO.setCreateTime(DateUtils.getCurrentTime());
        xgkCareerCourseFileDTO.setCreateUser(curUserId);
//        String basepath = VFSUtil.getVFSRootPath();
        int index2 = xgkCareerCourseFileDTO.getFilePath().lastIndexOf(".");
        String filepath_swf = "";
        if (index >= 0) {
            filepath_swf = xgkCareerCourseFileDTO.getFilePath().substring(0, index2) + ".swf";
        }
        String destfilename = filepath_swf.split("/")[filepath_swf.split("/").length - 1];
        String destflashpath = "/xgk/" + destfilename;
        //设置转码后的路径
        xgkCareerCourseFileDTO.setThumbnailsUrl(destflashpath);
        xgkCareerCourseFileDao.createAndId(xgkCareerCourseFileDTO);

        return xgkCareerCourseFileDTO;
    }

未完待续。。。。。。


flexpaper实现文件的在线预览

我们将文件转码成swf文件格式，可以使用flexpaper,在浏览器中展示文件。可以在官网上下载免费的版本

AjaxUpload实现文件上传+LibreOffice文件转码+flexPaper文件在线预览

AjaxUpload实现文件上传+LibreOffice文件转码+flexPaper文件在线预览

如图所示，我们可以看到flexpaper的功能还是很强大的，它支持放大缩小，页面的跳转，页面的记录，全屏播放，打印、搜索等功能。

首先判断浏览器是否安装了flash插件。

var hasFlash=function(){
    var flashChecker=function () {
        var hasFlash = 0; //是否安装了flash
        var flashVersion = 0; //flash版本
        var isIE = /*@[email protected]*/ 0; //是否IE浏览器

        if(isIE) {
            var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
            if(swf) {
                hasFlash = 1;
                VSwf = swf.GetVariable("$version");
                flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
            }
        } else {
            if(navigator.plugins && navigator.plugins.length > 0) {
                var swf = navigator.plugins["Shockwave Flash"];
                if(swf) {
                    hasFlash = 1;
                    var words = swf.description.split(" ");
                    for(var i = 0; i < words.length; ++i) {
                        if(isNaN(parseInt(words[i]))) continue;
                        flashVersion = parseInt(words[i]);
                    }
                }
            }
        }
        return { f: hasFlash, v: flashVersion };
    }
        return {
        flashChecker:flashChecker
    }

}();
引入flexpaper的js文件 

<script type="text/javascript" src="application/career/teaching/js/flexPaper/flexpaper.js?${VERSION}"></script>
注意需要修改flexpaper.js的路径 


window[instance] = flashembed(id, {
    src                       : _jsDirectory+"../application/career/teaching/js/flexPaper/FlexPaperViewer.swf",
    version                    : [10, 0],
    expressInstall           : "js/expressinstall.swf",
    wmode                  : _WMode
},{
将_jsDirectory换成自己对应的路径 


var playPPT= function(fileId) {
    //var fileId="2dc48caed975414687c52fe0b9f7744e";
    var url = contextPath + '/xgkUpload/findFileById.do?fileId='+fileId;
    jQuery('#documentViewer').FlexPaperViewer( // 对应FlexPaperViewer.swf文件
        //  "application/FlexPaper/FlexPaperViewer",
        { config : {
            SwfFile : url,
            Scale:1,
            ZoomTransition : 'easeOut',
            ZoomTime : 0.2,
            ZoomInterval : 0.2,
            FitPageOnLoad : true,
            FitWidthOnLoad : true,
            FullScreenAsMaxWindow : false,
            ProgressiveLoading : false,
            MinZoomSize : 0.2,
            MaxZoomSize : 5,
            SearchMatchAll : false,
            InitViewMode : 'Portrait',// 启动模式 ：SinglePage  Portrait TwoPage
            ViewModeToolsVisible : true,
            ZoomToolsVisible : true,
            NavToolsVisible : true,
            CursorToolsVisible : true,
            SearchToolsVisible : true,
            // WMode : 'window',
            localeChain: 'zh_CN'
        }});

   $('#documentViewer').bind('onCurrentPageChanged',function(e,pagenum){
       window.sessionStorage.setItem("pagenum",pagenum)
    });
   $('#documentViewer').bind('onDocumentLoaded',function(e,totalPages){
       var page= window.sessionStorage.getItem("pagenum")
       var teachingProcess=  $("#chapter_course_list").find("p.selected").attr("teachingProcess")
     // console.log("teachingProcess="+teachingProcess);
       if(teachingProcess){
           setTimeout("$FlexPaper('documentViewer').gotoPage("+teachingProcess+")",1000);
       }
      // setTimeout("$FlexPaper('documentViewer').gotoPage("+teachingProcess+")",1000);
       //$FlexPaper('documentViewer').setZoom(1.0);
       $FlexPaper('documentViewer').fitHeight();
   });
}

这就是使用flexpaper的核心入口了，其中url使文件以流的形式输出，下面是设置flexpaper的各种属性，属性的含义百度和官网上都有。

下面是flexpaper的几个绑定事件，当页面改变时记录当前页面。当页面加载完全时，获取总页面，代码都可以在这里面添加。

$FlexPaper('documentViewer').fitHeight();

这句话是使上传的文件高度自适应，以避免ppt半页被截断的情况。


下面贴上swf文件的输出流

    @RequestMapping("/findFileById")
 public void findFileById(HttpServletRequest request, HttpServletResponse response) throws Exception {
    String uploadFileId = request.getParameter("fileId");
    if (StringUtils.isBlank(uploadFileId)) {
        return;
    }
    String basepath = VFSUtil.getVFSRootPath();
    XgkCareerCourseFileDTO xgkCareerCourseFileDTO = xgkUploadService.findFileById(uploadFileId);
    if(xgkCareerCourseFileDTO != null){
        String url = basepath + xgkCareerCourseFileDTO.getThumbnailsUrl();
        File file = new File(url);
        outputStream(response, file, null, null);
    }
}

最后说一下转码服务LibreOffice

Windows下需要手动启用LibreOffice服务

能将doc、docx、excel、ppt、txt等主流的文档格式转码成pdf格式，相比于其他的转码工具，更简洁、高效、稳定，支持复杂的文档转码处理

在program中打开命令窗口，输入命令：
soffice --accept="socket,host=127.0.0.1,port=8100;urp;" --nofirststartwizard

SWFTools 是一组用来处理 Flash 的 swf 文件的工具包，包括：
1. 合并工具 swfcombine
2. 抽取工具 swfextract
3. PDF/JPEG/PNG/AVI/TTF/WAV 到 SWF 的转换工具 ：pdf2swf, jpeg2swf, png2swf, avi2swf, font2swf, and wav2swf|
4. 文本解析工具 swfstrings
5. SWF 解析器 swfdump
6. SWF 读写库 rfxswflib。


优点：与LibreOffice捆绑使用，能将各种类型文档最终转码成可在浏览器中直接播放的swf格式文件

相关推荐