Javaweb实现PDF文档预览、上传功能

前端页面

这里只做了一个简单按钮和表格

<script>
    function finPdf(){
        window.open("devDoc.do?storeName=test.pdf",
            "_self",
            "top=200,left=200,height=600,width=800,status=yes,toolbar=1,menubar=no,location=no,scrollbars=yes");
    }
</script>
<a href="javascript:void(0);" onclick="finPdf()">点击预览pdf</a>
<form method="post" action="upload.do" enctype="multipart/form-data">
    上传文件:<input type="file" name="file"><br>
    <input type="submit" value="提交">
</form>
${msg}

后端页面


Spring中配置文件上传解析器

<!--SpringConfig.xml-->
<!--    配置文件操作相关对象-->
    <bean name="diskFileItemFactory" class="org.apache.commons.fileupload.disk.DiskFileItemFactory">
    </bean>

    <bean name="fileUploader" class="org.apache.commons.fileupload.servlet.ServletFileUpload">
        <property name="fileItemFactory" ref="diskFileItemFactory"/>
        <property name="headerEncoding" value="UTF-8"/>
    </bean>

预览文件

	@RequestMapping("devDoc.do")
    public void devDoc(HttpServletRequest request, HttpServletResponse response, HttpSession session, String storeName) throws Exception {
        request.setCharacterEncoding("UTF-8");
        /**
         * 拼接预览文件目录;
         * session.getServletContext().getRealPath()返回Web模块编译输出目录,后追加参数里的内容
         * 这里我们把文件保存在Web模块编译目录下的file文件夹
         */
        String filePath = session.getServletContext().getRealPath("/file/" + storeName);
        //判断预览文件是否存在,不存在返回错误信息
        File file=new File(filePath);
        if (!file.exists()){
            request.setAttribute("msg","<font color='red'>预览文件未找到</font>");
            request.getRequestDispatcher("preview.jsp").forward(request,response);
        }
        //设置页面显示模式为pdf
        response.setContentType("application/pdf");
        //分别创建文件输入输出流
        FileInputStream in = new FileInputStream(file);
        OutputStream out = response.getOutputStream();
        byte[] b = new byte[1024];
        //输入流读入,输出流输出到页面
        while ((in.read(b))!=-1) {
            out.write(b);
        }
        out.flush();
        in.close();
        out.close();
    }

上传文件

	//文件上传解析器
    @Autowired
    ServletFileUpload uploader;
    
	@RequestMapping("upload.do")
    public void upload(HttpServletRequest request, HttpServletResponse response, HttpSession session) throws Exception {
        //获取文件保存路径
        String savePath=session.getServletContext().getRealPath("/file");
        //解析提交的数据,返回一个FileItem的集合,每个FileItem对应一个form表单的输入项
        List<FileItem> list = uploader.parseRequest(request);
        for(FileItem item:list){
            if(item.isFormField()){//如果是普通输入的数据
                String name = item.getName();
                String value = item.getString("UTF-8");
                System.out.println(name+"="+value);
            }
            else {//如果是文件类型数据
                String fileName=item.getName();
                //注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如: c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt
                //处理获取到的上传文件的文件名的路径部分,只保留文件名部分
                fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
                System.out.println(fileName);
                InputStream in=item.getInputStream();
                FileOutputStream out=new FileOutputStream(savePath+"\\"+fileName);
                byte b[] =new byte[1024];
                while (in.read(b)!=-1){
                    out.write(b);
                }
                in.close();
                out.close();
                item.delete();
            }
        }
        String msg="<font color='green'>上传成功</font>";
        request.setAttribute("msg",msg);
        request.getRequestDispatcher("preview.jsp").forward(request,response);
    }

运行效果

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
实现上传图片预览,需要以下步骤: 1. 在前端页面添加一个input标签,type属性设置为file,用于选择本地图片上传。 ``` <input type="file" id="fileInput" onchange="previewImage()"/> ``` 2. 在前端页面添加一个用于预览图片的标签,例如img标签。 ``` <img id="preview" src="" alt="预览图片" style="max-width:200px;max-height:200px;"> ``` 3. 在JavaScript中实现预览图片功能。 ``` function previewImage() { // 获取选择的文件对象 var file = document.getElementById("fileInput").files[0]; // 创建FileReader对象 var reader = new FileReader(); // 读取文件内容 reader.readAsDataURL(file); // 当文件读取完成时触发onload事件 reader.onload = function(e) { // 获取预览图片的标签对象 var preview = document.getElementById("preview"); // 设置预览图片的地址 preview.src = e.target.result; } } ``` 4. 在后端处理上传图片实现上传图片的后端代码可以使用Java提供的Servlet或Spring MVC框架等进行实现。 以下是一个简单的Servlet上传图片的示例代码: ``` protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取上传的文件对象 Part part = request.getPart("file"); // 获取文件名 String fileName = part.getSubmittedFileName(); // 获取文件保存的路径 String savePath = request.getServletContext().getRealPath("/upload"); // 创建保存文件的目录 File saveDir = new File(savePath); if (!saveDir.exists()) { saveDir.mkdirs(); } // 生成保存文件的唯一名称 String uuid = UUID.randomUUID().toString(); String saveName = uuid + "_" + fileName; // 保存文件 part.write(savePath + File.separator + saveName); // 返回保存的文件路径 String filePath = request.getContextPath() + "/upload/" + saveName; response.getWriter().write(filePath); } ``` 在前端页面中,可以使用Ajax将选择的图片文件上传到后端进行处理,并将返回的文件路径设置到预览图片的标签中。 ``` function uploadImage() { var file = document.getElementById("fileInput").files[0]; // 创建FormData对象,用于封装需要上传的数据 var formData = new FormData(); formData.append("file", file); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方式和请求地址 xhr.open("POST", "/uploadServlet"); // 发送请求 xhr.send(formData); // 当请求状态改变时触发onreadystatechange事件 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 获取预览图片的标签对象 var preview = document.getElementById("preview"); // 设置预览图片的地址 preview.src = xhr.responseText; } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值