转:http://blog.csdn.net/yusimiao/article/details/12586179
花了两天时间琢磨一下图片预览的功能
任务需求如下: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.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 obj.files.item(0).getAsDataURL(); return window.URL.createObjectURL(obj.files[0]); //return window.URL.createObjectURL(obj.files[0]); } 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> <img id="img_2" src="Chrysanthemum.jpg" width="133px" style="cursor:pointer;" onclick="tempClick()"> </form> </body> </html>
简单的对代码做一下讲解:
input type="file" 这个元素我试过让style隐藏(style=“display:none”),这样就不能或得到绝对路径,而是fakepath,为了不让它显示出来就让他100%的透明,下面有一个div,id为img_2,这个div是页面初始图片,点击这个图片调用input type="file" 中的方法,实现此功能。
相关推荐
主要介绍了jsp中点击图片弹出文件上传界面及实现预览实例详解的相关资料,需要的朋友可以参考下
点击图片弹出文件上传界面的效果,想必大家都有见到过吧,在本文为大家详细介绍下在jsp中是如何实现的,并对具体的实现代码做简要的介绍,感兴趣的朋友不要错过
“文件->远程操作->FTP 上传”在“设置”选项卡中设置好参数(“子目录”前面应该加“/”如“/web/”),点击“确定”回到“FTP 上传”选项卡,然后点击“上传”即可;“批量上传”的设置类似。 【12】软件技巧——...
测试浏览器:IE8、FF3.6.8、Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了……) 1、预览 1)...
Axx:ARJ压缩文件的分包序号文件,用于将一个大文件压至几个小的压缩包中(xx取01-99的数字) A3L:Authorware 3.x库文件 A4L:Authorware 4.x库文件 A5L:Authorware 5.x库文件 A3M,A4M:Authorware Macintosh...
弹出软件安装向导,点击“Next”开始安装; 2.自定义软件安装目录,默认路径为“C:\Program Files (x86)\ActiveState Komodo IDE 11”, 可以修改安装目录,安装路径选择时,不要带有英文符号的路径,点击“Next”...
4.26 离开与关闭程序的弹出窗口——对话窗口上的ICON图标 第5章 交互式通信服务与手机控制 5.1 具有正则表达式的TextView——Linkify规则 5.2 ACTION!CALL!拨打电话——Intent.ACTION.CALL的使用 5.3 自制发送...
4.26 离开与关闭程序的弹出窗口 4.27 隐藏式抽屉 4.28 手机桌面上的小玩意 4.29 手机图片搜索管理器 4.30 实时配置桌面上的AppWidget UI Layout 4.31 识别输入装置ID与InputDevice装置 4.32 选取文字的聪明文字联想 ...
4.26 离开与关闭程序的弹出窗口 4.27 隐藏式抽屉 4.28 手机桌面上的小玩意 4.29 手机图片搜索管理器 4.30 实时配置桌面上的AppWidget UI Layout 4.31 识别输入装置ID与InputDevice装置 4.32 选取文字的聪明文字联想 ...
4.26 离开与关闭程序的弹出窗口 4.27 隐藏式抽屉 4.28 手机桌面上的小玩意 4.29 手机图片搜索管理器 4.30 实时配置桌面上的AppWidget UI Layout 4.31 识别输入装置ID与InputDevice装置 4.32 选取文字的聪明文字联想 ...
4.26 离开与关闭程序的弹出窗口 4.27 隐藏式抽屉 4.28 手机桌面上的小玩意 4.29 手机图片搜索管理器 4.30 实时配置桌面上的AppWidget UI Layout 4.31 识别输入装置ID与InputDevice装置 4.32 选取文字的聪明文字联想 ...
├── layer layer弹出层插件 ├── laypage laypage 翻页插件 ├── jquery.contextmenu 右键菜单插件 ├── ueditor 百度编辑器 ├── Highcharts 图表插件 ├── echarts 百度图标插件 ├── datatables ...
jquery-confirm | 弹出窗口插件 | [https://github.com/craftpip/jquery-confirm](https://github.com/craftpip/jquery-confirm) jQuery EasyUI | 基于jQuery的UI插件集合体 | [http://www.jeasyui.com]...