Java web网站含图片的表单上传问题


一个jsp网站,jsp页面表单同时含有普通字段,和图片,上传的时候不能用一个servlet处理,后来想想,图片是以二进制流传到servlet然后接收处理的吧,而文字的普通字段应该不是这种方式,那么用servlet一个函数接收处理时的问题是不是出在这里??
但是,其他网站是怎么处理呢??先上传图片,然后返回路径在和其他字段一起传到数据库吗?
怎么同步?就是怎么一步一起上传成功?!
还有怎么给图片重命名!?
(Google不到...)
jsp页面form表单如下,我遇到问题,所以就分成两个表单form,如下所示:


 <!-- 表单结构 -->   
    <div>   
    <form class="contact_form" action="Upload_pic" method="post" name="contact_form" enctype="multipart/form-data">

          <li>
                         <h2 class='navtitle'>招领信息:</h2>
                         <span class="required_notification">Tips:详细的信息更高效匹配!</span>
         </li>
        <li>
                    <label for="picture">选择照片:</label>
                    <input type="file" name="fileName" id="file0"  />
                    <div  style="width:210px;height:210px;background:url(images/add_img1.png);margin:10px 260px;" >
                      <img  src="" id="img0" width=100% height=100%>
                    </div>
                        <script>    
                            $("#file0").change(function(){
                                var objUrl = getObjectURL(this.files[0]) ;
                                console.log("objUrl = "+objUrl) ;
                                if (objUrl) {
                                    $("#img0").attr("src", objUrl) ;
                                }
                            }) ;
                            //建立一個可存取到該file的url
                            function getObjectURL(file) {
                                var url = null ; 
                                if (window.createObjectURL!=undefined) { // basic
                                    url = window.createObjectURL(file) ;
                                } else if (window.URL!=undefined) { // mozilla(firefox)
                                    url = window.URL.createObjectURL(file) ;
                                } else if (window.webkitURL!=undefined) { // webkit or chrome
                                    url = window.webkitURL.createObjectURL(file) ;
                                }
                                return url ;
                            }
                        </script>
        </li>
        <li>
                <button class="submit" type="submit">上传照片</button>
        </li>
    </form> 


    <form class="contact_form" action="UploadAction?action=found&uid=<%=uid%>" method="post" name="contact_form" >

        <ul>   
            <li>
                <label for="place">照片路径:</label>
                <%
                request.setCharacterEncoding("utf-8");
                String picture=(String)request.getParameter("pic");
                %>
                <input type="text" name="picture" value="<%=picture %>" />
                <span class="form_hint">系统自动填写,用户请勿改动!</span>
            </li>  
             <li>


                <label for="name">物品类别:</label>
                <select name="category"  id="typeId" >  
                   <option value="others">其他类别</option>
                   <option value="keys">钥匙</option>
                   <option value="udisk">U盘</option>
                   <option value="wallet">钱包</option>
                   <option value="bag">包 等</option>
                   <option value="phone">手机</option>
                   <option value="headset">耳机</option>
                   <option value="book">书等</option>
                   <option value="umbrella">伞</option>
                   <option value="cup">水杯等</option>
                   <option value="bicycle">自行车</option>
                   <option value="electronics">其他电子配件</option>
                   <option value="card">其他卡类</option>
                </select>
            </li>
            <li>
                <label for="place">拾物地点:</label>
                <input type="text" name="place" placeholder="比如XX路口,XX教室..." required="required"/>
                <span class="form_hint">可以简单描述,不须十分精确</span>
            </li>
            <li>
                <label for="date">拾物时间:</label>
                <input type="date" name="time" placeholder="发现物品的时间" required="required""/> 
                <span class="form_hint">不须十分精确!</span>  
            </li>
            <li>
                <label for="message">特点描述:</label>
                <textarea name="details" cols="80" rows="6" placeholder="关于物品本身的描述" required="required" ></textarea>
                <span class="form_hint">详细的信息可以帮助我们更精确匹配对应失主!</span>
            </li>
            <li>
                <button class="submit" type="submit">确认提交</button>
            </li>
        </ul>
    </form>

后端的接收的servlet是:


 private void found(HttpServletRequest request, HttpServletResponse response) 
        throws ServletException, IOException {

        request.setCharacterEncoding("utf-8"); 
        /*
        //为解析类提供配置信息
        DiskFileItemFactory factory = new DiskFileItemFactory();
        //创建解析类的实例
        ServletFileUpload sfu = new ServletFileUpload(factory);
        //开始解析
        sfu.setFileSizeMax(1024*400);
        //每个表单域中数据会封装到一个对应的FileItem对象上
        try {
            List<FileItem> items = sfu.parseRequest(request);
            //区分表单域
            for (int i = 0; i < items.size(); i++) {
                FileItem item = items.get(i);
                //isFormField为true,表示这不是文件上传表单域
                if(!item.isFormField()){
                    ServletContext sctx = getServletContext();
                    //获得存放文件的物理路径
                    //upload下的某个文件夹   得到当前在线的用户  找到对应的文件夹

                    String path = sctx.getRealPath("/found_picture");
                    System.out.println("***"+path);
                    //获得文件名
                    //获得文件名
                    String fileName = item.getName();
                    System.out.println(fileName);

                    picture="found_picture/"+fileName;//存到数据库的字段值
                    System.out.println("路径:"+picture);

                    //该方法在某些平台(操作系统),会返回路径+文件名
                    fileName = fileName.substring(fileName.lastIndexOf("/")+1);
                    File file = new File(path+"\\"+fileName);
                    if(!file.exists()){
                        item.write(file);
                        //将上传图片的名字记录到数据库中


                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        */



        String category = new String(request.getParameter("category").getBytes("ISO-8859-1"), "UTF-8");//获取参数,防止乱码!
        String place = new String(request.getParameter("place").getBytes("ISO-8859-1"), "UTF-8");//
        String details =new String(request.getParameter("details").getBytes("ISO-8859-1"), "UTF-8");

        String picture=(String)request.getParameter("picture");;//存照片上传文件夹后的,相对路径地址,最后存进数据库
        String time = (String)request.getParameter("time");
        String uid = (String)request.getParameter("uid");
        System.out.println("UploadAction。java-found()函数输出调试 uid路径:"+uid);//在控制台输出,看看参数有没有传到这里
        System.out.println("UploadAction。java-found()函数输出调试 picture路径:"+picture);//在控制台输出,看看参数有没有传到这里

        boolean ret = false;
        DbConn dbc = new DbConn();
        ret = dbc.found_other_Upload(category,picture,time,place,details,uid);    //存到数据库,成功后返回true?!

        response.setContentType("text/html; charset=UTF-8"); //传参数,防止中文乱码

        if (ret == true)
        {
            response.sendRedirect("found.jsp?upload=ok");
        } 
        else 
        {
            request.setAttribute("error", "found操作有误!请勿做渗透测试!");
            request.getRequestDispatcher("error.jsp").forward(request, response);
        }


    }

顺便说一下:
在这里我把项目网站地址发出了 http://www.seeknow.org
体验账号:[email protected] ,密码:111
本人大学生一枚,打算写的基于HTML5的web APP项目!,但是目前是一个人主掌前端、后端、服务器搭建、UI美工bulabula,很累,感觉力不从心!如果你有Java web的经验,愿意和我一起完善项目吗?
如果您对我的idea感兴趣,一定要联系我([email protected]),一... it!!

java webapp javaweb html5 JSP

一幽容翼一 9 years, 11 months ago

你应该贴代码,会比较直观 = =
HTML表单里包含字符串参数和文件参数是不会有问题的,但是需要注意以下两个参数必须写:


 method="post" enctype="multipart/form-data"

发送方式是字符串和二进制流混合的,类似下面:


 POST http://www.baidu.com/ HTTP/1.1
Host: www.baidu.com
Content-Length: 473
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryW49oa00LU29E4c5U

------WebKitFormBoundaryW49oa00LU29E4c5U
Content-Disposition: form-data; name="myText"

hello world
------WebKitFormBoundaryW49oa00LU29E4c5U
Content-Disposition: form-data; name="upload1"; filename="file1.txt"
Content-Type: text/plain

This is file1.
------WebKitFormBoundaryW49oa00LU29E4c5U
Content-Disposition: form-data; name="upload2"; filename="file2.txt"
Content-Type: text/plain

This is file2, it's bigger.
------WebKitFormBoundaryW49oa00LU29E4c5U--

servlet该怎么处理怎么处理,参数不会干扰。
给图片重命名,按照文件哈希值,或者时间戳,或者用户信息什么的,或者组合起来都可以(不重复就行了)。

小小的乱乱 answered 9 years, 11 months ago

Your Answer