• 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=" 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);
        }
  • 相关阅读:
    解析空白符(空白,制表)分隔的字串
    关于select—页面中的ListBox的Javascript
    【函数】strcat源代码
    【SQL语法】系列08:利用Update更新表中数据
    【函数】fill和fill_n填充之区别
    【Xcode】编辑与调试
    【网站】在WAMP下安装wordpress
    【SQL语法】系列06:利用ORDER BY排序
    【SQL语法】系列07:利用insert into插入新行
    【Boost】系列03:内存管理之shared_ptr智能指针
  • 原文地址:https://www.cnblogs.com/gynbk/p/9407524.html
Copyright © 2020-2023  润新知