博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript实现点击图片文件名预览图片和修改功能
阅读量:5263 次
发布时间:2019-06-14

本文共 5126 字,大约阅读时间需要 17 分钟。

  前些天做一个新闻发布和修改的功能,通过javascript实现点击图片文件名预览图片,点击按钮将文件名变换为file文件选择,以此方法来实现修改图片功能,这里对这个工作做一个总结,希望对需要的孩纸有所帮助,也希望各位大神指点。(使用组建lightbox2.6.zip,下载地址:http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip)

先上几张图,看看效果!操作前显示:

  

点击文件名后:

可以通过按键切换下一张图片:

点击更改或者删除都可以将文件名变为file选框;

接下来就需要servlet来完成修改的功能了。

下边是javascript实现转化和图片预览:

 

 

下边是jsp页面,其中pic_1path是为了在不修改文件的情况下正确的传递原来的路径,以免造成错误修改。

                                图片1:                                                                 <%=news.getPic_1() %>                                                                                                                                                                                                                                                                                               
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)); } } }

 

转载于:https://www.cnblogs.com/mecca/p/3310950.html

你可能感兴趣的文章
java io流 对文件操作
查看>>
VS2010+PCL+openni配置
查看>>
图像颜色--opencv scalar
查看>>
JavsScript中的Document对象
查看>>
springboot+mybatis+shiro——登录认证和权限控制
查看>>
CDZSC_2015寒假新人(2)——数学 - G
查看>>
20145305 《信息安全系统设计基础》课程总结
查看>>
myeclipse 配置 tomcat7
查看>>
Linux中编译或安装程序时提示No such file or directory
查看>>
Java解析Excel之POI(二):解决 xls 和 xlsx 两种格式解析时的差异统一处理
查看>>
Go语言表组测试示例
查看>>
适合我胃口的angular.js学习资料
查看>>
过年过年了,篮球球和电影群都过年总结啦啦啦~~~~~
查看>>
C#异常处理
查看>>
《实战Angular从零到一》pdf
查看>>
C#属性
查看>>
利用js 获取ip和地址
查看>>
寻找图中&quot;通用的汇&quot;(Universal sink)
查看>>
Java并发程序入门
查看>>
AABB包围盒 OBB包围盒 包围球的比较
查看>>