基于JSP实现数据库中图片的存储与显示

1、引言

员工经过长期磨合与沉淀，具备了协作精神，得以通过团队的力量开发出优质的产品。创新互联坚持“专注、创新、易用”的产品理念，因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供做网站、网站设计、微信公众号开发、电商网站开发，微信小程序，软件定制设计等一站式互联网企业服务。

数据库应用程序，特别是基于WEB的数据库应用程序，常会涉及到图片信息的存储和显示。通常我们使用的方法是将所要显示的图片存在特定的目录下，在数据库中保存相应的图片的名称，在JSP中建立相应的数据源，利用数据库访问技术处理图片信息。但是，如果我们想动态的显示图片，上述方法就不能满足需要了。我们必须把图片放入数据库存储起来，然后通过编程动态地显示我们需要的图片。实际操作中，可以利用JSP的编程模式来实现图片的数据库存储和显示。

2、建立后台数据库

假定处理的是图片新闻，那么我们可以建立相应的数据库及数据表对象。我们要存取的数据表结构的SQL脚本如下所示：

 
 
 
  
  
  if exists (select * from dbo.sysobjects where id =   
  
  
  object_id(N'[dbo].[picturenews]') andOBJECTPROPERTY(id, N'IsUserTable') = 1)  
  
  
  drop table [dbo].[picturenews]  
  
  
  GO  
  
  
  CREATE TABLE [dbo].[picturenews] (  
  
  
  [id] [int] IDENTITY (1, 1) NOT NULL ,  
  
  
  [image] [image] NULL ,  
  
  
  [content] [varchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,  
  
  
  [detail] [varchar] (5000) COLLATE Chinese_PRC_CI_AS NULL   
  
  
  ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
  
  
  GO

表picturenews中，字段id作为标识，每存储一行数据，自动增加1。字段image

用于存储图片信息，其数据类型为“image”。

3、向数据库存储二进制图片

启动Dreamweaver MX后，新建一个JSP文件。其代码如下所示。

 
 
 
  
  
  <%@ page contentType="text/html;charset=gb2312"%>   
  
  
   
  
  
   
  
  
  </font></strong>存储图片<strong><font> TITLE></font></strong> </li>
  
  
  <li><strong><font> HEAD></font></strong> </li>
  
  
  <li><strong><font><body></font></strong> </li>
  
  
  <li><font> </font> </li>
  
  
  <li><strong><font><FORM</font></strong> <font>METHOD</font>=<font>POST</font> <font>ACTION</font>=<font>"testimage.jsp"</font><strong><font>></font></strong> </li>
  
  
  <li>新 闻 标 题：<strong><font><INPUT</font></strong> <font>TYPE</font>=<font>"text"</font> <font>NAME</font>=<font>"content"</font><strong><font>><BR></font></strong> </li>
  
  
  <li>新 闻 图 片：<strong><font><INPUT</font></strong> <font>TYPE</font>=<font>"file"</font> <font>NAME</font>=<font>"image"</font><strong><font>><BR></font></strong> </li>
  
  
  <li>新闻内容：  </li>
  
  
  <li><strong><font><TEXTAREA</font></strong> <font>name</font>=<font>"txtmail"</font> <font>rows</font>=<font>"15"</font> <font>cols</font>=<font>"90"</font>   </li>
  
  
  <li><font>style</font>="BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid;   </li>
  
  
  <li>BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 9pt;   </li>
  
  
  <li>HEIGHT: 200px; WIDTH: 100%" <font>wrap</font>=<font>"physical"</font> <strong><font>> TEXTAREA><br></font></strong> </li>
  
  
  <li><strong><font><INPUT</font></strong> <font>TYPE</font>=<font>"submit"</font><strong><font>> form></font></strong> </li>
  
  
  <li><strong><font> body></font></strong> </li>
  
  
  <li><strong><font> HTML></font></strong> </li>
 
 
 </ol></pre><p>将此文件保存为InputImage.jsp文件，其中testimage.jsp文件是用来将图片数据存入数据库的，具体代码如下所示： </p><pre><p> </p><pre>
   
   
   <ol>
    
    
    <li><strong><font><</font></strong>%@ page <font>contentType</font>=<font>"text/html;charset=gb2312"</font>%<strong><font>></font></strong>   </li>
    
    
    <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.sql.*"</font> %<strong><font>></font></strong> </li>
    
    
    <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.util.*"</font>%<strong><font>></font></strong> </li>
    
    
    <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.text.*"</font>%<strong><font>></font></strong> </li>
    
    
    <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.io.*"</font>%<strong><font>></font></strong> </li>
    
    
    <li><strong><font><html></font></strong>   </li>
    
    
    <li><strong><font><body></font></strong>   </li>
    
    
    <li><strong><font><</font></strong>%  </li>
    
    
    <li>Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");  </li>
    
    
    <li>//加载驱动程序类  </li>
    
    
    <li>Connection <font>con</font>=<font>DriverManager</font>.getConnection("jdbc:odbc:denglu","sa","sa");  </li>
    
    
    <li>//建立数据库联机，其中denglu为数据库名，sa为连接数据库的帐号及密码。  </li>
    
    
    <li>Statement <font>stmt</font>=<font>con</font>.createStatement();   </li>
    
    
    <li>//建立Statement对象  </li>
    
    
    <li>String <font>content</font>=<font>request</font>.getParameter("content");  </li>
    
    
    <li><font>content</font>=<font>new</font> String(content.getBytes("8859_1"),"gb2312");  </li>
    
    
    <li>String <font>filename</font>=<font>request</font>.getParameter("image");  </li>
    
    
    <li><font>filename</font>=<font>new</font> String(filename.getBytes("8859_1"),"gb2312");  </li>
    
    
    <li>String <font>detail</font>=<font>request</font>.getParameter("txtmail");  </li>
    
    
    <li><font>detail</font>=<font>new</font> String(detail.getBytes("8859_1"),"gb2312");  </li>
    
    
    <li>//获得所要显示图片的标题、存储路径、内容，并进行中文编码  </li>
    
    
    <li>FileInputStream <font>str</font>=<font>new</font> FileInputStream(filename);  </li>
    
    
    <li>String <font>sql</font>=<font>"insert into picturenews(content,image,detail) values(?,?,?)"</font>;  </li>
    
    
    <li>PreparedStatement <font>pstmt</font>=<font>con</font>.prepareStatement(sql);  </li>
    
    
    <li>pstmt.setString(1,content);  </li>
    
    
    <li>pstmt.setBinaryStream(2,str,str.available());  </li>
    
    
    <li>pstmt.setString(3,detail);  </li>
    
    
    <li>pstmt.execute();  </li>
    
    
    <li>//将数据存入数据库  </li>
    
    
    <li>out.println("Success,You Have Insert an Image Successfully");  </li>
    
    
    <li>%<strong><font>></font></strong> </li>
   
   
   </ol></pre><p><strong>4、网页中动态显示图片</strong></p><p>接下来我们要编程从数据库中取出图片，其代码如下所示。 </p><pre>
  
  
  <ol>
   
   
   <li><strong><font><</font></strong>%@ page <font>contentType</font>=<font>"text/html;charset=gb2312"</font>%<strong><font>></font></strong>   </li>
   
   
   <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.sql.*"</font> %<strong><font>></font></strong> </li>
   
   
   <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.util.*"</font>%<strong><font>></font></strong> </li>
   
   
   <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.text.*"</font>%<strong><font>></font></strong> </li>
   
   
   <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.io.*"</font>%<strong><font>></font></strong>   </li>
   
   
   <li><strong><font><html></font></strong> </li>
   
   
   <li><strong><font><body></font></strong> </li>
   
   
   <li><strong><font><</font></strong>%  </li>
   
   
   <li>Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");   </li>
   
   
   <li>//加载驱动程序类  </li>
   
   
   <li>Connection <font>con</font>=<font>DriverManager</font>.getConnection("jdbc:odbc:denglu","sa","sa");  </li>
   
   
   <li>Statement <font>stmt</font>=<font>con</font>.createStatement();  </li>
   
   
   <li>ResultSet <font>rs</font>=<font>null</font>;   </li>
   
   
   <li>//建立ResultSet（结果集）对象  </li>
   
   
   <li>int <font>id</font>= <font>Integer</font>.parseInt(request.getParameter("id"));  </li>
   
   
   <li>//获得所要显示图片的编号id，并转换为整型  </li>
   
   
   <li>String <font>sql</font> = <font>"select image from picturenews WHERE id="</font>+id+"";   </li>
   
   
   <li>//要执行查询的SQL语句  </li>
   
   
   <li><font>rs</font>=<font>stmt</font>.executeQuery(sql);  </li>
   
   
   <li>while(rs.next()) {  </li>
   
   
   <li>ServletOutputStream <font>sout</font> = <font>response</font>.getOutputStream();  </li>
   
   
   <li>//图片输出的输出流  </li>
   
   
   <li>InputStream <font>in</font> = <font>rs</font>.getBinaryStream(1);  </li>
   
   
   <li>byte b[] = new byte[0x7a120];  </li>
   
   
   <li>for(int <font>i</font> = <font>in</font>.read(b); i != -1;)  </li>
   
   
   <li>{  </li>
   
   
   <li>sout.write(b);   </li>
   
   
   <li>//将缓冲区的输入输出到页面  </li>
   
   
   <li>in.read(b);  </li>
   
   
   <li>}  </li>
   
   
   <li>sout.flush();  </li>
   
   
   <li>//输入完毕，清除缓冲  </li>
   
   
   <li>sout.close();  </li>
   
   
   <li>}  </li>
   
   
   <li>%<strong><font>></font></strong> </li>
   
   
   <li><strong><font> body></font></strong> </li>
   
   
   <li><strong><font> html></font></strong> </li>
  
  
  </ol></pre><p>将此文件保存为testimageout.jsp文件。下一步要做的工作就是使用HTML标记：</p><pre>
  
  
  <ol>
   
   
   <li><strong><font><IMG</font></strong> <font>src</font>="testimageout.jsp?id=<strong><font><</font></strong>%=rs.getInt("id<font>")%>"</font> <font>width</font>=<font>100</font> <font>height</font>=<font>100</font><strong><font>></font></strong> </li>
  
  
  </ol></pre><p>取出所要显示的图片，其中id是所要取出图片的编号。本例中我们输出了***个和***一个图片信息，详细的程序代码如下所示。 </p><pre>
  
  
  <ol>
   
   
   <li><strong><font><</font></strong>%@ page <font>contentType</font>=<font>"text/html;charset=gb2312"</font>%<strong><font>></font></strong>   </li>
   
   
   <li><strong><font><</font></strong>%@ page <font>import</font>=<font>"java.sql.*"</font> %<strong><font>></font></strong> </li>
   
   
   <li><strong><font><html></font></strong> </li>
   
   
   <li><strong><font><head></font></strong> </li>
   
   
   <li><strong><font><title></font></strong>动态显示数据库图片<strong><font> title></font></strong> </li>
   
   
   <li><strong><font> head></font></strong> </li>
   
   
   <li><strong><font><body></font></strong> </li>
   
   
   <li><strong><font><</font></strong>%   </li>
   
   
   <li>Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");  </li>
   
   
   <li>Connection <font>con</font>=<font>DriverManager</font>.getConnection("jdbc:odbc:denglu","sa","sa");  </li>
   
   
   <li>Statement <font>stmt</font>=<font>con</font>.createStatement();  </li>
   
   
   <li>String <font>sql</font>=<font>new</font> String();  </li>
   
   
   <li><font>sql</font>= <font>"select * from picturenews"</font>;  </li>
   
   
   <li>ResultSet <font>rs</font>=<font>stmt</font>.executeQuery(sql);  </li>
   
   
   <li>rs.last();  </li>
   
   
   <li>//将指针移至***一条记录  </li>
   
   
   <li>%<strong><font>></font></strong>   </li>
   
   
   <li><strong><font><table></font></strong> </li>
   
   
   <li><strong><font><tr><td><IMG</font></strong> <font>height</font>=<font>99</font> <font>src</font>=<font>"testimageout.jsp?id=1"</font> <font>width</font>=<font>136</font><strong><font>> td></font></strong> </li>
   
   
   <li>//取出***个图片  </li>
   
   
   <li><strong><font><td><IMG</font></strong> <font>height</font>=<font>99</font> <font>src</font>="testimageout.jsp?id=<strong><font><</font></strong>%=rs.getInt("id<font>")%>"</font> <font>width</font>=<font>136</font><strong><font>> td></font></strong> </li>
   
   
   <li>//取出***一个图片  </li>
   
   
   <li><strong><font> tr> table></font></strong> </li>
   
   
   <li><strong><font> body></font></strong> </li>
   
   
   <li><strong><font> html></font></strong> </li>
  
  
  </ol></pre><p>以上基于JSP实现数据库中图片的存储与显示的WEB应用程序在Windows 2000 Professional/SQL Server 2000/ Apache Tomcat 4.0/JDK 1.4 JAVA环境下调试通过。 </p>            <br>
            网站题目：基于JSP实现数据库中图片的存储与显示            <br>
            转载注明：<a href="http://zjjierui.cn/article/coecchh.html">http://zjjierui.cn/article/coecchh.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/djgsjih.html">电脑网络连接感叹号是什么意思</a>
                </li><li>
                    <a href="/article/djgsjgh.html">sqlserver系统表说明</a>
                </li><li>
                    <a href="/article/djgsjhg.html">Discuz！DatabaseError如何解决？（数据库问题-虚拟主机/数据库问题）</a>
                </li><li>
                    <a href="/article/djgsjpg.html">opopr15为什么来微信不显示</a>
                </li><li>
                    <a href="/article/djgsjie.html">从远处登录Linux：有一种更简单的方式（远程登录linux）</a>
                </li>        </ul>
    </div>
</div>
<div class="f_service_con">
    <div class="h_fumin">
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service01.png"></div>
            <p>售后响应及时</p><span>7×24小时客服热线</span>
        </div>
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service02.png"></div>
            <p>数据备份</p><span>更安全、更高效、更稳定</span>
        </div>
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service03.png"></div>
            <p>价格公道精准</p><span>项目经理精准报价不弄虚作假</span>
        </div>
        <div class="h_fumin_lei">
            <div class="h_fumin_lei_tu"><img src="/Public/Home/images/f_service04.png"></div>
            <p>合作无风险</p><span>重合同讲信誉，无效全额退款</span>
        </div>
    </div>
</div>
<div class="footerbar">
    <div class="footer-t">
        <div class="f-box">
            <div class="f-1">
                <div class="f-t">
                    <h2>联系我们</h2>
                    <span>TEL</span>
                </div>
                <div class="f-b">
                    <h1><a href="tel:13518219792" rel="nofollow">135-1821-9792</a></h1>
                    <h1><a href="tel:028-86922220" rel="nofollow">028-86922220</a></h1>
                    <p>地址：成都市太升南路288号锦天国际</p>

                </div>
            </div>
            <div class="f-2">
                <div class="f-t">
                    <h2>快捷导航</h2>
                    <span>Shortcut</span>
                </div>
                <div class="f-b">
                    <ul >
                    </ul>
                    <ul >
                        <li><a href="/jianshe" title="广元网站建设">广元网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox2" title="品牌网站建设">品牌网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox1" title="企业网站建设">企业网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox4" title="集团网站建设">集团网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox4_2" title="外贸网站建设">外贸网站建设</a></li>
                        <li><a href="/jianshe#ym_websiteBox4_5" title="企业宣传视频">企业宣传视频</a></li>
                    </ul>
                    <ul >
                        <li><a href="/weixin" title="微信开发">微信开发</a></li>
                        <li><a href="/weixin#item1" title="公众号开发">公众号开发</a></li>
                        <li><a href="/weixin#item2" title="微商城建设">微商城建设</a></li>
                        <li><a href="/weixin#item3" title="微官网建设">微官网建设</a></li>
                        <li><a href="/weixin#item4" title="小程序开发">小程序开发</a></li>
                    </ul>
                    <ul>
                        <li><a href="/case/" title="网站作品案例">网站作品案例</a></li>
                        <li><a href="/case/" title="品牌网站案例">品牌网站案例</a></li>
                        <li><a href="/case/" title="集团网站案例">集团网站案例</a></li>
                        <li><a href="/case/" title="企业网站案例">企业网站案例</a></li>
                        <li><a href="/case/" title="外贸网站案例">外贸网站案例</a></li>
                        <li><a href="/case/" title="营销网站案例">营销网站案例</a></li>
                    </ul>
                    <ul style="margin:0;">
                        <li><a href="/about/">广元建站</a></li>
                        <li><a href="/about/">公司简介</a></li>
                        <li><a href="/about#ab_item3">企业文化</a></li>
                        <li><a href="/contact">联系我们</a></li>
                        <li><a href="/Pay.html">付款方式</a></li>
                        <li><a href="/jianshe#ym_websiteBox8">售后服务</a></li>
                    </ul>
                    <div style="clear:both;"></div>
                </div>
            </div>
            <div class="f-3">
                <div class="f-t">
                    <h2>二维码</h2>
                    <span>QR CODE</span>
                </div>
                <div class="f-b">
                    <ul>
                        <li><img src="/Public/Home/images/fewm.png">
                            <p>微信公众号</p>
                        </li>
                        <li style="margin: 0"><img src="/Public/Home/images/fewm2.png">
                            <p>手机端网站</p>
                        </li>
                        <div style="clear:both;"></div>
                    </ul>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="footer-about">
        <div class="w1200">广元优众联杰建站公司是一家专注从事于高品质视觉体验及互联网设计开发，<a href="/" target="_blank">广元网站建设</a>，<a
                href="/jianshe" target="_blank">广元网站设计</a>，<a href="/jianshe" target="_blank">广元网页设计</a>，<a
                href="/jianshe" target="_blank">广元网站制作</a>，<a href="/jianshe#ym_websiteBox2"
                                                              target="_blank">品牌网站建设</a>，<a href="/jianshe#ym_websiteBox3" target="_blank">营销网站建设</a>，<a
                href="/jianshe#ym_websiteBox4" target="_blank">集团网站建设</a>，<a href="/jianshe#ym_websiteBox1"
                                                                             target="_blank">企业网站建设</a>，<a href="/jianshe#ym_websiteBox4_2" target="_blank">外贸网站建设</a>，<a
                href="/jianshe#ym_websiteBox4_3" target="_blank">响应式网站建设</a>，<a href="/weixin#item4"
                                                                                target="_blank">小程序开发</a>，<a href="/weixin" target="_blank">微信开发</a>，<a
                href="/jianshe#ym_websiteBox4_4" target="_blank">企业形象设计</a>，<a href="/jianshe#ym_websiteBox4_5"
                                                                               target="_blank">企业宣传视频</a>等服务，优众联杰建站位于广元市龙岗区大运软件小镇，优众联杰建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
        </div>
        <div class="friend-links">
            <h6 class="clearfix">
                <span class="tilte">友情链接</span>
                <a class="exchagne" href="http://wpa.qq.com/msgrd?v=3&uin=631063699&site=qq&menu=yes">交换友情链接</a>
            </h6>
            <div class="link-list clearfix">
                <div class="link-slider">
                    <a href="http://www.dirfh.com/" title="海口实木门窗" target="_blank">海口实木门窗</a>   <a href="http://www.kswsj.com/" title="成都制作网站" target="_blank">成都制作网站</a>   <a href="http://www.fzwuji.cn/" title="成都门头广告" target="_blank">成都门头广告</a>   <a href="http://www.bjjiameng.com/" title="成都画册vi设计" target="_blank">成都画册vi设计</a>   <a href="https://www.cdcxhl.com/waimao.html" title="外贸营销网站建设" target="_blank">外贸营销网站建设</a>   <a href="http://www.sanjiecs.com/" title="大悟县塑料凳子" target="_blank">大悟县塑料凳子</a>   <a href="http://m.cdcxhl.cn/H5/
" title="自适应网页设计" target="_blank">自适应网页设计</a>   <a href="http://www.idcmianyang.com/" title="绵阳idc服务器托管" target="_blank">绵阳idc服务器托管</a>   <a href="https://www.cdxwcx.com/cloud/" title="成都云服务器" target="_blank">成都云服务器</a>   <a href="http://www.scjierui.cn/" title="scjierui.cn" target="_blank">scjierui.cn</a>                   </div>
            </div>
        </div>
    </div>
    <div class="footer-b">
        <div class="f-box">
            <ul>
                <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li>
                <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li>
                <li><a href="/about/" target="_blank">联系我们</a></li>
                <li><a href="https://www.cdxwcx.com/pay/" target="_blank">付款方式</a></li>
                <li><a href="https://www.cdcxhl.com/menu.html" target="_blank">网站地图</a></li>
                <li><a href="#" target="_blank">sitemap</a></li>
                <li>
                    <p>
                        <script data-cfasync="false" src="/Public/Home/js/email-decode.min.js"></script>
                    </p>
                </li>
                <div style="clear:both;"></div>
            </ul>
            <p class="copy">Copyright © 2025 成都优众联杰科技有限公司 广元建站公司 All Rights Reserved   <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024116266号-5</a>
                <a style="display:none" target="_blank" href="###"><img style="vertical-align:middle" border="0" src="" width="65" height="25" /></a>

            </p>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="sj_footer">
        <div class="f-box">
            <ul>
                <li><a href="/jianshe" target="_blank">网站建设</a></li>
                <li><a href="/jianshe#ym_websiteBox6" target="_blank">服务流程</a></li>
                <li><a href="/jianshe#ym_websiteBox8" target="_blank">售后服务</a></li>
                <li><a href="https://www.cdxwcx.com/pay/" target="_blank">付款方式</a></li>
                <li><a href="/about/" target="_blank">关于我们</a></li>
                <li><a href="https://www.cdcxhl.com/menu.html" target="_blank">网站地图</a></li>
                <div style="clear:both;"></div>
            </ul>
            <p class="copy">Copyright © 2025 成都优众联杰科技有限公司 广元建站公司 </p>
            <p class="copy"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备2024116266号-5</a>  <a
                    href="###" target="_blank"><img src="/Public/Home/images/govicon.gif" width="20" height="28" border="0" style="border-width:0px;border:hidden; border:none;"></a></p>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>
<script type='text/javascript' src='/Public/Home/js/qqkefu.js'></script>
<div class="qqkefu">
    <ul>
        <li class="qq_czaa" id="130"><b class="a"></b>135-1821-9792</li>
        <li class="qq_czaa" id="130"><a href="tencent://message/?uin=1683211881"><b class="b"></b>业务咨询QQ</a></li>
        <li class="qq_czaa" id="130"><a href="javascript:showDiv()"><b class="f"></b>提交合作意向表</a></li>
        <li class="qq_czb">
            <b class="c"></b>
            <div class="erweima">
                <p><img src="/Public/Home/images/right_erweima.png"></p>
            </div>
        </li>
        <li class="top"><span></span></li>
    </ul>
</div>
<div id="popDiv" class="mydiv" style="display:none;">
    <a class="mydiv_clk" href="javascript:closeDiv()">X</a>
    <div class="mydiv_list">
        <div class="c_f_title"><span class="c_f_t">合作意向表</span></div>
        <div class="c_f_con">
            <form id="form1" name="form1" class="mess_form" method="post" action="/post_order">
                <input name='enews' type='hidden' value='AddFeedback'>
                <input name="bid" value="1" type="hidden">
                <input type="hidden" name="ecmsfrom" value="9">
                <input type="hidden" name='title' value="客户提交需求">
                <li class="c_n"><span>公司名称</span>
                    <dl><input name='gsname' id='gsname' type="text"></dl>
                </li>
                <li class="c_n"><span>邮箱</span>
                    <dl><input name='gemail' id='gemail' type="text"></dl>
                </li>
                <li class="c_n xmm">
                    <div class="xmm_01"><span>姓名</span>
                        <dl class="c_n_i"><input name='name' id='name' type="text"></dl>
                    </div>
                    <div class="xmm_01"><span style="text-align:center">电话</span>
                        <dl class="c_n_i"><input name="tel" type="text"></dl>
                    </div>
                </li>
                <li class="c_tser">您需要的服务</li>
                <li class="clearfix">
                    <dd><label><input type="radio" name='hobby' id='hobby' value="高端网站建设"><span>高端网站建设</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做微信营销"><span>我需要做微信营销</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="要找长期合作，需要年度服务"><span>要找长期合作，需要年度服务</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="我需要做购物商城"><span>我需要做购物商城</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="我需要网站改版"><span>我需要网站改版</span></label></dd>
                    <dd><label><input type="radio" name='hobby' id='hobby' value="其他"><span>其他</span></label></dd>
                </li>
                <li class="c_tser">您关注的地方</li>
                <li class="clearfix">
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="对功能要求比较高"><span>对功能要求比较高</span></label></dd>
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="对设计创意要求比较高"><span>对设计创意要求比较高</span></label></dd>
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="需要可以购物支付"><span>需要可以购物支付</span></label></dd>
                    <dd><label><input type="radio" name='hobby2' id='hobby2' value="搜索引擎排名"><span>搜索引擎排名</span></label></dd>
                </li>
                <li class="c_tser">预算</li>
                <li class="clearfix clearfix2">
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="一万以内"><span>一万以内</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="1-3万"><span>1-3万</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="3-5万"><span>3-5万</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="5万以上"><span>5万以上</span></label>
                    </dd>
                    <dd><label><input type="radio" name='hobby3' id='hobby3' value="需招投标"><span>需招投标</span></label>
                    </dd>
                </li>
                <li class="c_n" style="border-top:1px solid #eee; padding-top:10px"><span>验证码</span>
                    <dl class="c_n_i yzmm"><input type="text" name='code' id='code' value=""></dl><span
                            style="text-align:center"><img src="/Public/Home/images/1661eb19783442c38063791555cd0d80.gif"
                                                           onclick="this.src=this.src + '?'" width="100" height="40"></span>
                </li>
                <li class="clearfix">
                    <dd class="submit"><input name='submit' type="submit" value="提交需求"></dd>
                </li>
            </form>
        </div>
    </div>
</div>
<div id="bg" class="bg" style="display:none;"></div>
<div id='popIframe' class='popIframe' frameborder='0'></div>
<script>
    //提交需求选项
    $(document).ready(function (e) {
        $(".mess_form").submit(function () {
            if ($("#gsname").val() == "") {
                alert("请填写您的公司名称！");
                $("#gsname").focus();
                return false;
            }
            if ($("#gemail").val() == "") {
                alert("请填写您的邮箱");
                $("#gemail").focus();
                return false;
            }
            if ($("#name").val() == "") {
                alert("请填写您的姓名！");
                $("#name").focus();
                return false;
            }
            if ($("#tel").val() == "") {
                alert("请填写您的电话！");
                $("#tel").focus();
                return false;
            }
            if ($("#hobby").val() == "") {
                alert("请选择您需要的服务！");
                $("#hobby").focus();
                return false;
            }
            if ($("#hobby2").val() == "") {
                alert("请选择您关注的地方！");
                $("#hobby2").focus();
                return false;
            }
            if ($("#hobby3").val() == "") {
                alert("请选择您的预算！");
                $("#hobby3").focus();
                return false;
            }
            if ($("#code").val() == "") {
                alert("请填写正确的验证码！");
                $("#code").focus();
                return false;
            }
        });
    });
</script>
<script language="javascript" type="text/javascript">
    //提交需求窗口
    function showDiv() {
        document.getElementById('popDiv').style.display = 'block';
        document.getElementById('popIframe').style.display = 'block';
        document.getElementById('bg').style.display = 'block';
    }
    function closeDiv() {
        document.getElementById('popDiv').style.display = 'none';
        document.getElementById('bg').style.display = 'none';
        document.getElementById('popIframe').style.display = 'none';
    }
</script>
<script type="text/javascript" src="/Public/Home/js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="/Public/Home/js/su_new.js"></script>
</body>
</html>
<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>