jsp中点击图片弹出文件上传界面及实现预览实例详解

Java  /  管理员 发布于 7年前   167

jsp中点击图片弹出文件上传界面及实现预览实例详解

花了两天时间琢磨一下图片预览的功能

任务需求如下：

1：jsp页面中有一个图片(pic_1)

2：点击图片弹出类似于资源管理器的界面

3：选择完某一个图片之后在pic_1处预览

我在IE8上试验下面这段代码，可以实现上述功能，没有在别的浏览器中测试，如果各位朋友知道多种浏览器的支持方法，请赐教，共同学习，谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript"> function tempClick(){    /**   * 火狐浏览器实现点击图片出现文件上传界面   * var a=document.createEvent("MouseEvents");   * a.initEvent("click", true, true);   * document.getElementById("upload_main_img").dispatchEvent(a);   */    //IE浏览器实现点击图片出现文件上传界面  document.getElementById('main_img').click();   //调用main_img的onclick事件 }  /**  * 预览图片  * @param obj  * @returns {Boolean}  */ function PreviewImg(obj) {   var newPreview = document.getElementById("img_2");  var imgPath = getPath(obj);  alert(imgPath);  if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){   alert("图片格式错误！");   return false;  }    newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";   newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgPath; }  /**  * 得到图片绝对路径  * @param obj  * @returns  */ function getPath(obj){  if(obj) {    if(navigator.userAgent.indexOf("MSIE")>0) {    obj.select();     //IE下取得图片的本地路径     return document.selection.createRange().text;   } else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) {     if (obj.files) { // Firefox下取得的是图片的数据      return files.item(0).getAsDataURL();      }      return obj.value;     }    return obj.value;   }  }  </script> </head> <body> <form> <div><input type="file" style="position: absolute; filter: alpha(opacity = 0); opacity: 0; width: 30px;" size="1" id="main_img" name="main_img" onchange="PreviewImg(this)"></div> <div id="img_2" style="width:133px;height:95px; cursor:pointer; background-image: url('Chrysanthemum.jpg');" onclick="tempClick()"></div> </form> </body> </html>

简单的对代码做一下讲解：

input type="file"  这个元素我试过让style隐藏（style=“display:none”），这样就不能或得到绝对路径，而是fakepath，为了不让它显示出来就让他100%的透明，下面有一个div，id为img_2,这个div是页面初始图片，点击这个图片调用input type="file" 中的方法，实现此功能。 

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！


  • 上一条：
    jsp有两个按钮来控制Timer的开始和结束方法
    下一条：
    JSP 中Spring组合注解与元注解实例详解

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客