java里的图片上传回显方法

java里的图片上传回显方法

 

整体流程：

         在前端页面中通过input标签的type属性值为file方式上传文件，通过ajax异步提交的方式实现页面里图片的实时显示。后台采用servlet方式，判断前端页面的提交数据的方式（post或者get方式），获取数据信息

 

 

准备：

jar包 准备：一个commons-io-2.6.jar包，一个commons-fileupload-1.3.3.jar包

        

         Js准备：ajaxfileupload.js （js异步提交所需要的js）

        

 

Jsp代码：      

   <form action="demo" method="post">

          <div id="file">

         

               <button type="button" onclick="deleteImg()">删除</button>

              

               <span id="span">

                    +

               </span>

               <input id="firstImg" type="hidden" name="firstImg" value="">

               <input id="myFile" type="file" name="myFile" onchange="uploadImg(this)"/>

          </div>

          <input type="submit" >

     </form>



创建uploadImg()事件

function uploadImg(obj){

               var id = obj.id;

               $.ajaxFileUpload({

                    fileElementId:id,

                    url:'demo',

                    type:'POST',

                    dataType:'text',

                    success:function(data){

                         if(data!=null || data.trim()!=""){

$("#span").html("<img src='"+data+"' width='200px' height='200px'>");

                              $("#firstImg").val(data);

                         }

                    }

              

               });

          }

 

 

发送ajaxFileUpload()请求，后台servlet接收请求，上传图片，页面会动态获取图片信息，将文件保存到指定的路径文件夹去。

后台servl代码：

@Override

    protected void doPost(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");

        resp.setContentType("text/html;charset=utf-8");

        //获取系统中图片存储的路径

        String url = "img/";

        String path = getServletContext().getRealPath("/"+url);

        System.out.println("path:"+path);

        //1、创建文件工厂对象

        DiskFileItemFactory factory = new DiskFileItemFactory();

        //2、创建文件解析器对象

        ServletFileUpload sfu = new ServletFileUpload(factory);

        try {

            //3、通过解析器，获取上传文件的集合

            List<FileItem> fileItemList = sfu.parseRequest(req);

            //遍历集合

            FileItem fileItem = fileItemList.get(0);

            String fileName = new Date().getTime()+"_"+fileItem.getName();

            System.out.println("fileName:"+fileName);

            //设置文件的保存对象

            File file = new File(path+fileName);

            System.out.println("file:"+file);

            //保存文件

            fileItem.write(file);

            resp.getWriter().print(url+fileName);

        } catch (Exception e) {

            e.printStackTrace();

        }

    }