jsp实现文件上传预览功能,该如何处理

jsp实现文件上传预览功能

本帖最后由 godric_star 于 2015-08-13 12:43:36 编辑

源程序实现图片格式转换的功能，具体为上传一bmp或x文件，将其转换为x或bmp格式文件并且提供下载，该功能已实现，但又要求实现上传图片预览功能，即把上传的bmp文件或转换后的bmp文件显示在网页中。特来求教jsp中如何实现，具体点的话是src后路径如何编写。

附上程序部分代码：

servlet部分代码：（说明：文件上传到路径/WEB-INF/upload下，转换结果也保存在此目录下，因此主要为读取文件路径以及文件名称）

	public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

                //得到上传文件的保存目录，将上传的文件存放于WEB-INF目录下，不允许外界直接访问，保证上传文件的安全

                String savePath = getServletContext().getRealPath("/WEB-INF/upload");

                File file = new File(savePath);

                

                //判断上传文件的保存目录是否存在

                if (!file.exists() && !file.isDirectory()) {

                    System.out.println(savePath+"目录不存在，需要创建");                  

                    file.mkdir(); //创建目录

                }                

                String message = ""; //消息提示

                try{

                    //使用Apache文件上传组件处理文件上传步骤：

                    //1、创建一个DiskFileItemFactory工厂

                    DiskFileItemFactory factory = new DiskFileItemFactory();

                    //2、创建一个文件上传解析器

                    ServletFileUpload upload = new ServletFileUpload(factory);                    

                    upload.setHeaderEncoding("UTF-8"); //解决上传文件名的中文乱码

                    //3、判断提交上来的数据是否是上传表单的数据

                    if(!ServletFileUpload.isMultipartContent(request)){                        

                        return; //按照传统方式获取数据

                    }

                    //4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项

                    List<FileItem> list = upload.parseRequest(request);

                    for(FileItem item : list){

                            String filename = item.getName(); //得到上传的文件名称

                            if(filename==null || filename.trim().equals("")){

                                continue;

                            }

                            //处理获取到的上传文件的文件名的路径部分，只保留文件名部分

                            String Filename = filename.substring(filename.lastIndexOf("\\")+1);

                            

                            //处理获取到的上传文件的文件名的路径部分，只保留文件名不含扩展名部分

                            String FilenameWithoutExtension = Filename.substring(0,Filename.lastIndexOf("."));

                            

                            //处理获取到的上传文件的文件名的路径部分，只保留文件扩展名

                            String FilenExtensionName = Filename.substring(Filename.lastIndexOf(".")+1);              

                            InputStream in = item.getInputStream(); //获取item中的上传文件的输入流                           

                            FileOutputStream out = new FileOutputStream(savePath + "\\" + Filename); //创建一个文件输出流                            

                            byte buffer[] = new byte[1024]; //创建一个缓冲区                           

                            int len = 0; //判断输入流中的数据是否已经读完的标识

                            //循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据

                            while((len=in.read(buffer))>0){

                                //使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + XYFilename)当中

                                out.write(buffer, 0, len);

                            }                            

                            in.close(); //关闭输入流                            

                            out.close(); //关闭输出流                            

                            item.delete(); //删除处理文件上传时生成的临时文件

jsp部分：

  <body>

    <form action="${pageContext.request.contextPath}/servlet/XYChangeWeb" enctype="multipart/form-data" method="post">

        上传文件：<input type="file" name="file">

        <input type="submit" value="提交">

        <input type="reset" value="重置">

    </form>


    <img src="这里该怎么写？" />

    

  </body>

------解决思路----------------------
tomcat 解析很慢的。
推荐 nginx 对静态文件直接返回：

	# 静态请求本地处理

	location / {

		root		        ..../WEB-INF/upload;

		index		        index.html;

	}

db 存放图片相对路径，
至于静态页面直接放从 db 取出来的该路径即可。
注意控制好 nginx 用户和 tomcat 用户的访问权限。
------解决思路----------------------
你是一下   我测试通过了

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
$(function(){
        var ei = $("#large");
        ei.hide();
        $("#img1").mousemove(function(e){
                ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
        }).mouseout( function(){
                ei.hide("slow");
        })
        $("#f1").change(function(){
                $("#img1").attr("src","file:///"+$("#f1").val());
        })
});
</script>
<style type="text/css">
        #large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>

jsp实现文件上传预览功能,该如何处理

相关推荐