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));

}
}
}