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')"/>&nbsp;
                                <input type="button" value="删除" onclick="deleteAttachment('pic_1')"/>
                                                
                                <input type="hidden" id="pic_1h" name="pic_1" value="<%=news.getPic_1() %>"/>
                                
                                &nbsp;&nbsp;</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));

                    }
                }
            }