【Jsp精品源码栏目提醒】:网学会员--在 Jsp精品源码编辑为广大网友搜集整理了:JSP教程_新闻图片管理模块 - 其它资料绩等信息,祝愿广大网友取得需要的信息,参考学习。
第 29 章 新闻图片管理模块 本章首先实现新闻发布系统中的新闻图片管理模块。
该模块没有前台程序,都是后台的图片管理,实现图片的发布、修改和删除等操作。
该模块管理的图片,将在发布的新闻中使用。
本章要点包括以下内容: 创建文件之间的逻辑关系 实现图片的上传功能 实现图片的管理功能 实现图片选择功能 创建相应的 JavaBean 类文件 29.1 需要创建的文件 下面分析一下该新闻图片模块所需要创建的文件,以及文件之间的逻辑关系如何。
29.1.1 图片上传相关文件 要实现文件上传功能,这里需要使用到一个第三方的 Jar 包,全名为 lybbs.jar(开
源码)。
读者可以到网上搜索一下,把它下载下来,然后复制到 Web 模块的 WEN-INF/lib 目录下,再添加到 Eclipse 库中。
(1)uploadpic.
jsp:该页面用于添加新的图片。
(2)uploadpicok.
jsp:用于处理管理员已经提交的新的图片,包括把图片文件上传到指定的服务器目录中,然后把图片的其他信息保存在数据库表 pic 中。
29.1.2 图片管理相关文件 (1)picmanagement.
jsp:通过该页面管理员可以查看到所有图片的信息。
(2)editpic.
jsp:修改某个图片的信息。
(3)editpicok.
jsp:进行图片修改的相关操作。
29.1.3 图片选择相关文件 (1)selpic.
jsp:选择图片,用在图片新闻发布中,可以查看后面两章的内容。
29.1.4 创建相应的JavaBean类文件 (1)Pic.java 接口类 第 18 章 常用插件扩展点 479 (2)SqlPic.java:实现 Pic 接口类。
(3)PicFactory.java 抽象类:定义所有操作图片的方法。
(4)SqlPicFactory.java:继承 PicFactory 类,实现 PicFactory 类中定义的所有方法。
需要创建的各文件之间的逻辑关系如图 29.1 所示。
lt逻辑图gt 管理 图片的发布 图片的统一管理 员 Uploadpic.
jsp: 用 Picmanagement.
jsp: 进 于上传图片 行图片的统一管理 删除某个 在 图片信息 管 处理图片上传 理 页 Uploadpicok.
jsp: Editpic.
jsp: 用于修改 Deletepic.
jsp: 删除 面 处理图片上传 图片信息 某个图片 显 示 处理图片修改 Editpicok.
jsp: 处理图 片修改的操作 Selpic.
jsp: 选择某个图
JSP页面部分 片, 在商品发布以及新 由外部模块调用 闻发布时用到 用于图片的选择 JavaBean类的调用 PicFactory.java: 抽 Pic.java: 接口类 象类 SqlPic.java:Pic接 SqlPicFactory.java: 口类的实现类 图片的操作类 图 29.1 逻辑图 29.2 实现图片上传功能 该小节将引领读者如何实现图片上传功能。
29.2.1 图片上传页面uploadpic.
jsp 该页面用于图片上传,并且最多可以同时上传十张图片,管理员可以通过单击“more”和“less”480 Eclipse 从入门到精通按钮来增加和减少同时上传图片的数量,该页面的详细代码如下: lt page importquotcn.com.zzb.news.quotgt lt page import”cn.com.zzb.util.”gt ltHTMLgt ltHEADgt ltTITLEgt图片上传lt/TITLEgt ltLINK RELquotstylesheetquot TYPEquottext/cssquot HREFquot../inc/admin.cssquotgt lt-- 下面 JavaScript 将实现增加和减少上传图片数量的功能 --gt ltscript languagequotJavaScriptquotgt var uploadShowed0 function clickMore //单击页面中“more”按钮将执行该方法 alertuploadShowed //提示框显示已经增加的图片上传个数 if0ltuploadShowed ampamp uploadShowed lt9 uploadShowed //增加一个图片上传,但是最大不能大于 10 个图片 document.allquotuploadquotuploadShowed.style.display quotquot //使该增加的图片上传表单可视 else //否则同时上传的图片数超过 10 alertquot最多只支持十张图片同时发布!quot function clickLess //单击页面中“less”按钮将执行该方法 alertuploadShowed if0ltuploadShowed ampamp uploadShowedlt9 document.allquotuploadquotuploadShowed.style.display quotnonequot//使得减少的那个图片上传表单不可见 uploadShowed-- //图片上传个数减 1 else //上传的图片个数不能小余 1 alertquot已经只剩下一个图片上传了!quot function clickCheck //该方法对输入框进行初步检查,数据是否合理 ifdocument.form.uploadFile0.valuequotquot //如果选择图片的输入框为空 alertquot请输入您要上传的图片文件!quot document.form.uploadFile0.focus return false return true lt/scriptgt lt Factory factory Factory.getInstance Board board factory.getBoard //初始化 Board 实例对象 BoardFactory boardfactory factory.getBoardFactory //初始化 BoardFactory 实例对象 NewsBoard newsboard factory.getNewsBoard //初始化 NewsBoard 实例对象,该类在新闻模块中介绍 //初始化 NewsBoardFactory 实例对象 NewsBoardFactory newsboardfactory factory.getNewsBoardFactory Iterator iterator int k 0 gt lt-- //以下实现,当选择一级部门时,自动根据选择生成下级部门的所有子选项 第 18 章 常用插件扩展点 481 function trimOptions dd cnt while dd.options.length gt cnt dd.optionscnt null function getOptionsselectedIndexselect1 var total1select1.length for j0jlttotal1j trimOptionsselect1j ifselectedIndex0 //0 表示上级选项选择的是“产品图片“ lt iterator boardfactory.List //列举出所有的商品板块信息 k0 whileiterator.hasNext board Boarditerator.next gt select1.optionsltkgtnew Optionltboard.getBoardNamegtltboard.getBoardIDgt lt k gt else ifselectedIndex1 //1 表示上级选项选择的是“新闻图片“ lt iterator newsboardfactory.List //列举出所有的新闻板块信息 k0 whileiterator.hasNext newsboard NewsBoarditerator.next gt select1.optionsltkgtnew Optionltnewsboard.getNamegtltnewsboard.getIDgt lt k gt else //否则,表示上级选项选择的是“链接图片” select1.options0new Optionlt您上传的是链接类型的图片gt0 --gtlt/scriptgtlt/HEADgtltbodygtltform action quotuploadPicOK.jspquot methodpost nameform onSubmitquotreturn clickCheckquot enctypequotmultipart/form-dataquotgtlttable widthquot95quot borderquot0quot cellspacingquot1quot cellpaddingquot3quot aligncenter classquottableBorderquotgt lttrgt ltth height24 colspan2gtltBgt上传图片lt/thgt lt/trgtlt/tablegtlttable widthquot95quot borderquot0quot cellspacingquot1quot cellpaddingquot3quot aligncenter classquottableBorderquotgt482 Eclipse 从入门到精通 lttrgt lttd widthquot15quot height30 classquotforumrowquotgt上传图片:lt/tdgt lttd classquotforumrowquotgt ltinput typequotfilequot namequotuploadFile0quot sizequot50quotgt ltinput namequotmorequot typequotbuttonquot onclickquotclickMorequot valuequotMorequotgt lt-- “more”按钮 --gt ltinput namequotlessquot typequotbuttonquot onclickquotclickLessquot valuequotLessquotgt lt-- “less”按钮 --gt lt/tdgt lt/trgt lttrgt lttdgt图片所属类型:lt/tdgt lttdgt ltselect namequottype0quot onChangequotjavascript:getOptionsthis.optionsthis.selectedIndex.valuethis.form.board0quotgt ltoption valuequot0quot selectedgt产品图片lt/optiongt ltoption valuequot1quotgt新闻图片lt/optiongt ltoption valuequot2quotgt链接图片lt/optiongt lt/selectgt lt/tdgt lt/trgt lttrgt lttdgt图片所在新闻板块:lt/tdgt lttdgtltselect namequotboard0quotgt lt iterator boardfactory.List whileiterator.hasNext board Boarditerator.next out.printlnquotltoption valuequotboard.getBoardIDquotgtquotboard.getBoardNamequotlt/optiongtquot gt lt/selectgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片名称:lt/tdgt lttd classquotforumrowquotgt ltinput typequottextquot namequotdesc0quot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片注释:lt/tdgt lttd classquotforumrowquotgt ltinput typequottextquot namequotalt0quot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片链接:lt/tdgt lttd classquotforumrowquotgt ltinput typequottextquot namequotlink0quot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片位置:lt/tdgt lttd classquotforumrowquotgt ltselect namequotposition0quotgt ltoption valuequotquotgt左对齐lt/optiongt ltoption valuequotcenterquotgt居中对齐lt/optiongt ltoption valuequotrightquotgt右对齐lt/optiongt 第 18 章 常用插件扩展点 483 lt/selectgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片参数:lt/tdgt lttd classquotforumrowquotgt 长:ltinput typequottextquot namequotwidth0quot sizequot3quotgt 宽:ltinput typequottextquot namequotheight0quot sizequot3quotgt 边框:ltinput typequottextquot namequotborder0quot sizequot1quot valuequot0quotgt ltbrgt ltfont colorredgt长、宽、边框不填或填零将显示图片的实际大小!lt/fontgt lt/tdgt lt/trgtlt/tablegtlt forint i1ilt9i //迭代输出另外 9 个隐藏的图片上传表单,通过 stylequotdisplay:nonequot实现隐藏gtlttable widthquot95quot borderquot0quot cellspacingquot1quot cellpaddingquot3quot aligncenter classquottableBorderquot idquotuploadltigtquot stylequotdisplay:nonequotgt lt-- id 标识各表单 --gt lttrgt lttd widthquot15quot height30 classquotforumrowquotgt上传图片ltigt:lt/tdgt lttd classquotforumrowquotgt ltinput typequotfilequot namequotuploadFileltigtquot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttdgt图片所属类型:lt/tdgt lttdgt ltselect namequottypeltigtquot onChangequotjavascript:getOptionsthis.optionsthis.selectedIndex.valuethis.form.boardltigtquotgt ltoption valuequot0quot selectedgt产品图片lt/optiongt ltoption valuequot1quotgt新闻图片lt/optiongt ltoption valuequot2quotgt链接图片lt/optiongt lt/selectgt lt/tdgt lt/trgt lttrgt lttdgt图片所在新闻板块:lt/tdgt lttdgtltselect namequotboardltigtquotgtlt iterator boardfactory.List whileiterator.hasNext board Boarditerator.next out.printlnquotltoption valuequotboard.getBoardIDquotgtquotboard.getBoardNamequotlt/optiongtquot gt lt/selectgt lt/tdgt lt/trgt lttrgt484 Eclipse 从入门到精通 lttd classquotforumrowquotgt图片名称:lt/tdgt lttd classquotforumrowquotgt ltinput typequottextquot namequotdescltigtquot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttrgt lttd classquotforumrowquotgt图片注释:lt/tdgt lttd classquotforumrowquotgt ltinput typequottextquot namequotaltltigtquot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片链接:lt/tdgt lttd classquotforumrowquotgt ltinput typequottextquot namequotlinkltigtquot sizequot50quotgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片位置:lt/tdgt lttd classquotforumrowquotgt ltselect namequotpositionltigtquotgt ltoption valuequotquotgt左对齐lt/optiongt ltoption valuequotcenterquotgt居中对齐lt/optiongt ltoption valuequotrightquotgt右对齐lt/optiongt lt/selectgt lt/tdgt lt/trgt lttrgt lttd classquotforumrowquotgt图片参数:lt/tdgt lttd classquotforumrowquotgt 长:ltinput typequottextquot namequotwidthltigtquot sizequot3quotgt 宽:ltinput typequottextquot namequotheightltigtquot sizequot3quotgt 边框:ltinput typequottextquot namequotborderltigtquot sizequot1quot valuequot0quotgt ltbrgt ltfont colorredgt长、宽、边框不填或填零将显示图片的实际大小!lt/fontgt lt/tdgt lt/trgt lt/tablegt lt gt lttable widthquot95quot borderquot0quot cellspacingquot1quot cellpaddingquot3quot aligncenter classquottableBorderquotgt lttrgt lttd classquotforumRowquot aligncentergt ltinput typequotsubmitquot namequotsubmitquot valuequot上 传quotgt lt/tdgt lt/trgt lt/tablegt lt/formgt lt/bodygt lt/htmlgt 程序说明: (1)该程序中使用的 NewsBoard 类(新闻板块的数据封装类)将在新闻发布模块中介绍,读者可以先参考第三十章。
(2)该页面实现图片上传的数量可变,即可以一次上传一张图片,也可以同时上传多个图片,但 第 18 章 常用插件扩展点 485最大只能同时上传 10 张。
其实在页面程序中已经打印出了 10 张图片的上传表单,只不过后 9 个图片上传表单通过属性 stylequotdisplay:nonequot已经被设置为不可见,而单击“More”按钮,将执行 JavaScript 中定义的 clickMore方法来使其中一个隐藏的图片上传表单可视; 同样单击“Less”按钮,将执行 JavaScript中的 clickLess方法来使可视表单中的一个隐藏起来,从而达到动态增减图片上传表单的数量。
(3)因为在ltformgt标签中设置了属性 onSubmitquotreturn clickCheckquot,所以在单击“上传”按钮时,会首先调用 JavaScript 中的 clickCheck方法来检验第一个图片文件选择输入框中的内容是否为空, 即系统要求至少上传一个图片,如果返回 true,即进行图片提交;否则,不提交。
(4)该页面的运行效果如图 29.2 所示。
图 29.2 图片上传页面29.2.2 处理图片上传页面uploadpicok.
jsp 上一页面 uploadpic.
jsp 进行上传图片的提交以及图片基本信息的填写,然后交付给该页面进行相应的处理,uploadpicok.
jsp 页面程序需要把图片文件保存在指定的位置,并且图片的相关信息也需要存储在数据库表 pic 中,程序中使用到了第三方 jar 包中的 com.lyforum.upload.SmartUpload 类。
该页面的详细代码如下: lt page importquotcn.com.zzb.news.quotgt lt page import”cn.com.zzb.util.”gt lt-- 使用ltjsp:useBeangt标签来引用 JavaBean 类 SmartUpload,并定义 smartUpload 来标识这个类 --gt ltjsp:useBean idquotsmartUploadquot scopequotpagequot classquotcom.lyforum.upload.SmartUploadquot /gt lt Factory factory Factory.getInstance PicFactory picFactory factory.getPicFactory //初始化 PicFactory 实例对象486 Eclipse 从入门到精通 Pic pic factory.getPic //初始化 Pic 实例对象 smartUpload.initializepageContext //文件上传的初始化 smartUpload.upload //文件上传 com.lyforum.upload.File uploadFilenull //定义一个上传文件的对象 int fileCountsmartUpload.getFiles.getCount //计算出总共上传文件的个数,上页面决定 1 到 10 文件 int maxUpload1000 //确定最大总上传文件的大小 int uploadFileSize0 String uploadFileExtquotquot String allowUploadExtquotjpggifpngbmpquot //定义可以上传的文件类型 String allowUploadExtArrayallowUploadExt.splitquotquot //把可以上传的文件类型存放在数组中 String uploadRealPathquot../pic/quot //指定上传文件存放的目录 String uploadFileNamequotquot whilefileCount--0 .