javascript实现点击图片文件名预览图片和修改功能
前些天做一个新闻发布和修改的功能，通过javascript实现点击图片文件名预览图片，点击按钮将文件名变换为file文件选择，以此方法来实现修改图片功能，这里对这个工作做一个总结，希望对需要的孩纸有所帮助，也希望各位大神指点。（使用组建lightbox2.6.zip，下载地址：http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip）
先上几张图，看看效果！操作前显示：
点击文件名后：
可以通过按键切换下一张图片：
点击更改或者删除都可以将文件名变为file选框；
接下来就需要servlet来完成修改的功能了。
下边是javascript实现转化和图片预览：
<script type="text/javascript"> function changeToFile(id) { var oNP = document.getElementById(id); var value = oNP.value; oNP.outerHTML = "<input type='file' id='" + id + "' name='"+id+"' value='" + value + "' size='5' onchange='getFileName(this.id)'> "; document.getElementById(id).focus(); } function getFileName(id){ var obj = document.getElementById(id); var title = obj.value; var size=title.length; var name=id+"h"; alert(name); title=title.substring(12,size); alert(title); document.getElementById(name).value=title; }function deleteAttachment(id){ var oNP = document.getElementById(id); changeToFile(id); getFileName(id); alert("变为file"); var attachmentPath=id+"path"; alert(document.getElementById(attachmentPath).value); document.getElementById(attachmentPath).value="null"; alert(document.getElementById(attachmentPath).value); } </script>
下边是jsp页面，其中pic_1path是为了在不修改文件的情况下正确的传递原来的路径，以免造成错误修改。
<tr> <td>图片1：</td><td> <input type="hidden" id="pic_1path" name="pic_1path" value="<%=news.getPic_1path() %>"/> <span id="pic_1" value="<%=news.getPic_1() %>" > <a class="example-image-link" href="<%=path %>/upload/images/<%=news.getPic_1path() %>" data-lightbox="example-1"><%=news.getPic_1() %></a> </span> <input type="button" value="更改" onclick="changeToFile('pic_1')"/> <input type="button" value="删除" onclick="deleteAttachment('pic_1')"/> <input type="hidden" id="pic_1h" name="pic_1" value="<%=news.getPic_1() %>"/> </td> </tr>
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)); } } }
