zoukankan      html  css  js  c++  java
  • jquery mobile 表单提交 图片/文件 上传

    jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败

    1  html代码

    <!doctype html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
        <link  rel="stylesheet" type="text/css" href="jquerymobile1.4.0-green/zms-green.css"/>
        <link rel="stylesheet" href="jquerymobile1.4.0-green/jQuery.mobile.icons.min.css" />
        <link rel="stylesheet" href="jquerymobile1.4.0-green/jquery.mobile.structure-1.4.0.css" />


        <link rel="stylesheet" href="css/my.css" />


        <script src="commond-plug/jquery.min.js" type="text/JavaScript"></script>
        <script src="jquerymobile1.4.0-green/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
        <title>HTML-ZMS</title>
        <script>
            $(document).ready(function () {


            });
        </script>


        <stytle>


        </stytle>
    </head>


    <body>


    <div data-role="page">


        <div data-role="header" data-position="fixed" style="background: #ff6932;color: #ffffff;text-shadow: none;">
            <h1>Jquery mobile 1.4</h1>
            <!--   <a href="#" class="ui-btn">返回</a>-->
        </div>


        <div   class="ui-content">
            <div class="file-box">
                <form action="../servlet/phonegapUp" method="post" enctype="multipart/form-data"  data-ajax="false">


                    <input type="text" id="zms" name="zms">
                    <input type="text" id="value1" name="value1">
                    <input type="text" id="value2" name="value2">




                    <input type="file"   accept="image/png" name="fileField" id="fileField"  />


                    <input type="submit" name="submit" class="btn" value="上22传" />
                </form>
            </div>
        </div>


        <div data-role="footer" data-position="fixed" style="background: #ff6932;color: #ffffff;text-shadow: none;">
            <h4>中兴长天(南昌)信息技术有限公司</h4>
        </div>




    </div>


    </body>
    </html>

    2  服务端代码  新建一个servlet,修改 dopost代码

    public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
            request.setCharacterEncoding("UTF-8");    
            Date date = new Date();//获取当前时间    
            SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");    
            //SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");    
            String newfileName = sdfFileName.format(date);//文件名称    
            String fileRealPath = "";//文件存放真实地址    
            
            String firstFileName="";    
            
            // 获得容器中上传文件夹所在的物理路径    如果按日期存放,则可以在files\后面继续加 sdFolder+"\"
            String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "files\";    
           /* System.out.println("路径" + savePath+"; name:"+name);    */
            System.out.println("路径" + savePath);    
            File file = new File(savePath);    
            if (!file.isDirectory()) {    
                file.mkdirs();    
            }    
        
            try {    
                DiskFileItemFactory fac = new DiskFileItemFactory();    
                ServletFileUpload upload = new ServletFileUpload(fac);    
                upload.setHeaderEncoding("UTF-8");    
                // 获取多个上传文件    
                List fileList = fileList = upload.parseRequest(request);    
                // 遍历上传文件写入磁盘    
                Iterator it = fileList.iterator();    
                while (it.hasNext()) {    
                FileItem obit = (FileItem)it.next();  
                    //如果是普通  表单参数
                 
                    if(obit.isFormField()){ //普通域,获取页面参数
                        String field = obit.getFieldName();
                        
                     if(field.equals("value1"))
                     {
                    System.out.println(obit.getString("UTF-8"));
                          
                     }
                     else if(field.equals("value2")){
                     
                    System.out.println(obit.getString("UTF-8"));
                         
                     }
                    }
                    // 如果是 多媒体
                   
                    if(obit instanceof DiskFileItem){  
                        DiskFileItem item = (DiskFileItem) obit;    
                        // 如果item是文件上传表单域       
                        // 获得文件名及路径       
                        String fileName = item.getName();    
                        if (fileName != null) {    
                            firstFileName=item.getName().substring(item.getName().lastIndexOf("\")+1);    
                            String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名    
                            fileRealPath = savePath + newfileName + formatName;//文件存放真实地址    
                                
                            BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流    
                            BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流    
                            Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹    
                            //上传成功, 
                            if (new File(fileRealPath).exists()) {    
                                //虚拟路径赋值    
                               // fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\")+1);    
                                //保存到数据库    
                                System.out.println("上传成功了, 您还可以做其他操作");    
                                
                                //System.out.println("虚拟路径:"+fileRealResistPath);   
                                response.getWriter().write(fileRealPath.substring(fileRealPath.lastIndexOf("\")+1)); 
                            }    
                                 
                        }     
                    }  
                }     
            } catch (org.apache.commons.fileupload.FileUploadException ex) {  
               ex.printStackTrace();    
               System.out.println("没有上传文件");    
               return;    
            }     
         /*  response.getWriter().write("1");    */
    }

    data-ajax="false" 是重点,终于解决了

  • 相关阅读:
    考研机试 5.反序输出
    考研机试 4.代理服务器
    考研机试 3.约数的个数
    考研机试 8.整数拆分
    考研机试 6.手机键盘
    考研机试 2.成绩排序
    监督学习与非监督学习的区别
    关于调整input里面的输入光标大小
    JS读取cookie(记住账号密码)
    html嵌套规则
  • 原文地址:https://www.cnblogs.com/dogdogwang/p/7462833.html
Copyright © 2011-2022 走看看