前些天做一个新闻发布和修改的功能,通过javascript实现点击图片文件名预览图片,点击按钮将文件名变换为file文件选择,以此方法来实现修改图片功能,这里对这个工作做一个总结,希望对需要的孩纸有所帮助,也希望各位大神指点。(使用组建lightbox2.6.zip,下载地址:http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip)
先上几张图,看看效果!操作前显示:
点击文件名后:
可以通过按键切换下一张图片:
点击更改或者删除都可以将文件名变为file选框;
接下来就需要servlet来完成修改的功能了。
下边是javascript实现转化和图片预览:
下边是jsp页面,其中pic_1path是为了在不修改文件的情况下正确的传递原来的路径,以免造成错误修改。
servlet: public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); News news = new News(); try { // 实例化一个硬盘文件工厂,用来配置上传组件ServletFileUpload DiskFileItemFactory factory = new DiskFileItemFactory(); factory.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb // 用以上工厂实例化上传组件 ServletFileUpload upload = new ServletFileUpload(factory); upload.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB // 设置上传的地址 String uploadPath = this.getServletContext().getRealPath( "/upload/images"); List items = upload.parseRequest(request);// 得到所有的上传文件 Iterator it = items.iterator(); // 逐条处理 while (it.hasNext()) { // 得到当前文件 FileItem fi = (FileItem) it.next(); // 检查当前项目是普通表单项目还是上传文件 if (fi.isFormField()) { // 如果是普通表单项目,显示表单内容。 request.setCharacterEncoding("utf-8"); if ("id".equals(fi.getFieldName())) { news.setId(Integer.parseInt(fi.getString("utf-8"))); } else if ("title".equals(fi.getFieldName())) { news.setTitle(fi.getString("utf-8")); System.out.println(fi.getString("utf-8")); } else if ("pic_1".equals(fi.getFieldName())) { news.setPic_1(fi.getString("utf-8")); } else if ("pic_2".equals(fi.getFieldName())) { news.setPic_2(fi.getString("utf-8")); } else if ("pic_3".equals(fi.getFieldName())) { news.setPic_3(fi.getString("utf-8")); } else if ("pic_1path".equals(fi.getFieldName())) { news.setPic_1path(fi.getString("utf-8")); } else if ("pic_2path".equals(fi.getFieldName())) { news.setPic_2path(fi.getString("utf-8")); } else if ("pic_3path".equals(fi.getFieldName())) { news.setPic_3path(fi.getString("utf-8")); } else if ("time".equals(fi.getFieldName())) { news.setTime(fi.getString("utf-8")); System.out.println(fi.getString("utf-8")); } else if ("contents".equals(fi.getFieldName())) { news.setContents(fi.getString("utf-8")); System.out.println(fi.getString("utf-8")); } } else { Format format = new SimpleDateFormat("yyyyMMdd_HHmmss"); Date date = new Date(); String path = fi.getName(); // 得到去除路径的文件名 String filename = path .substring(path.lastIndexOf("\\") + 1); System.out.println(filename); String type = null; if (!"".equals(filename) && filename != null) { int b = (int) (Math.random() * 1000); type = filename.substring(filename.length() - 4, filename.length()); filename = format.format(date) + b + type; // 将文件保存在Web目录的upload文件夹中 if ("pic_1".equals(fi.getFieldName())) { news.setPic_1(fi.getName()); news.setPic_1path(filename); System.out.println(fi.getName()); } else if ("pic_2".equals(fi.getFieldName())) { news.setPic_2(fi.getName()); news.setPic_2path(filename); System.out.println(fi.getName()); } else if ("pic_3".equals(fi.getFieldName())) { news.setPic_3(fi.getName()); news.setPic_3path(filename); System.out.println(fi.getName()); } fi.write(new File(uploadPath, filename)); } } }