ajax方式上传文件

场景，需要上传附近但不刷新当前页面信息。

前段jsp代码

 

 1 <!DOCTYPE html>
 2 <html><head>
 3   <title></title>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 6 </head>
 7 <script src="js/jquery-1.7.1.min.js"></script>
 8 
 9 <body>
10 <button id="Photograph">拍照</button>
11 <form  id="cardForm" enctype="multipart/form-data" method="post">
12       <input type="file" name="file1" id="file1" accept="image/*" capture="camera" style="display: none;">
13 </form>
14 <textarea id="text" STYLE="width: 400px;height: 200px"></textarea>
15 <script type="text/javascript">
16   $(function () {
17   $("#Photograph").click(function () {
18       $("#file1").trigger("click");
19 
20   });
21 
22   $("#file1").change(function () {
23       var url=new FormData($("#cardForm")[0]);
24       /**
25        *  使用ajax提交form表单的上传文件，
26        *  首先要使用FormData的获取表单的上次文件数据，
27        *  在ajax中设置contentType:false,processData:false,cache:false,这三个属性必须为false具体原因就不清楚了
28        *  但可以简单说下这3个属性的作用：
29        *  cache    布尔值，表示浏览器是否缓存被请求页面。默认是 true，因为是文件类型数据不需要缓存
30        *  contentType  发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。false就是不指定类型
31        *  processData  布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。关键应该在这里，因为我们上传的是文件类型数据，如果
32        *  不设置processData:false请求就好将文件类型数据去转换为字符串会导致js报错。
33        */
34       $.ajax({
35           url:"Servlet",
36           type:"post",
37           contentType:false,
38           processData:false,
39           cache:false,
40           data:url,
41           success:function (data) {
42               $("#text").text(data);
43               console.log(data);
44           }
45       });
46   });
47   });
48 
49 </script>
50 </body></html>

 

后端Servlet代码：当然如果是SpringMVC等框架的话，前段不需要改动将后端按照SpringMvc的方式修改就可以了。

http://www.cnblogs.com/gynbk/p/6556270.html 上传文件代码地址

 

使用Commons-FileUpload组件实现文件上传
 
1.    创建上传对象
创建一个工厂对象
DiskFileItemFactory  factory=new DiskFileItemFactory ();
创建一个新的文件上传对象
ServletFileUpload  upload=new  ServletFileUpload(factory);
2.    解析上传请求
通过parseRequest()方法获取全部表单项。
Public  List  parseRequest(HttpServletRequest  request) throws FileUploadException
通过isFormField()方法判断表单项是文件域还是普通表单域。如果返回true说明是普通表单域。
Public  Boolean  isFormField()
通过FileItem类的getName()方法实现获取文件上传名称。
getSize()方法获得文件上传的大小。
getContentType()方法获得上传文件的类型。
 
上传文件实例

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String  ctname;
        //获得文件上传的真实地址
        String fileDir=request.getRealPath("upload/");
        String  mesg="文件上传成功";
        String  address="";

        //判断是否上传文件
        if(ServletFileUpload.isMultipartContent(request)){
            //创建一个工厂对象
            DiskFileItemFactory  factory=new DiskFileItemFactory();
            //设置内存中允许存储的字节
            factory.setSizeThreshold(20*1024);
            //设置存放临时文件的路径
            factory.setRepository(factory.getRepository());
            //创建一个上传文件的对象
            ServletFileUpload  upload=new ServletFileUpload(factory);
            //设置上传文件大小
            int size=4*1024*1024;
            //保存上传文件的集合对象
            List list=null;

            try {
                //获得上传文件列表
                list=upload.parseRequest(request);
            } catch (FileUploadException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            //创建迭代器
            Iterator  iter=list.iterator();
            //循环迭代
            while(iter.hasNext()){
                //创建FileItem对象,获得每一个上传文件
                FileItem  flie=(FileItem)iter.next();
                //判断是文件域或普通表单域
                if(!flie.isFormField()){
                    //获得文件名称
                    String name=flie.getName();
                    //判断文件大小是否超过设定文件大小
                    if(flie.getSize()>size){
                        mesg="文件过大，无法上传";

                    }

                    //获取上传文件大小
                    String ctsize=new  Long(flie.getSize()).toString();
                    //判断文件是否存在
                    if((name==null || name.equals("")) && ctsize.equals("0")){

                        mesg="文件为空。";
                        continue;//文件为空跳出本次循环
                    }
                    //创建上传文件的名称
                    ctname=name.substring(name.lastIndexOf("\\")+1,name.length());
                    address=fileDir+"\\"+ctname;
                    //创建File对象,根据文件地址创建一个空文件
                    File  file=new File(address);

                    try {
                        //向创建的文件中写入数据
                        flie.write(file);
                    } catch (Exception e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                    }

                }

            }

        }

       
//返回文本内容的方式
        response.setCharacterEncoding("utf-8");
        response.getWriter().write(mesg);

//RequestDispatcher 跳转页面方式
//request.setAttribute("msg", mesg);
dispatcher=request.getRequestDispatcher("Deal.jsp");

//执行转发
//dispatcher.forward(request, response);
        doGet(request, response);
    }

 

posted on 2018-08-02 15:39  拿着菜刀  阅读(2402)  评论(0)  编辑  收藏  举报

导航