js 图片预览
2016-05-14 17:50
344 查看
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'img.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview(avalue) { debugger; var docObj = document.getElementById("doc"); //检查图片类型 if(!checkType(docObj)){ return ; } var imgObjPreview = document.getElementById("preview"); if (docObj.files && docObj.files[0]) { //火狐下,直接设img属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '150px'; imgObjPreview.style.height = '180px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下,使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById("localImag"); //必须设置初始大小 localImagId.style.width = "150px"; localImagId.style.height = "180px"; //图片异常的捕捉,防止用户修改后缀来伪造图片 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { alert("您上传的图片格式不正确,请重新选择!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } //检查图片类型 function checkType(file){ var f = file.value; if(!f){ alert("请上传图片"); return false; } else{ if(!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(f)) { alert("图片类型必须是.gif,jpeg,jpg,png中的一种"); return false; } return true; } } </script> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td height="101" align="center"> <div id="localImag"> <img id="preview" src="http://avatar.csdn.net/2/D/C/1_u012965203.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"> </div> </td> </tr> <tr> <td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"> </td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- js学习笔记6----作用域及解析机制
- JS控制图片显示的大小(图片等比例缩放)
- JSON和JSONP有哪些区别,PhoneGap跨域请求如何实现
- js中indexOf()方法和toFixed()方法
- 表单验证与Json配合
- tarjan算法--cojs 1298. 通讯问题
- 火狐浏览器下 js给img标签赋值:base64编码
- [未完整]谈js中的作用域链和闭包
- js图片转base64编码压缩上传
- jsp页面 报core 找不到
- Json数据由于数组下标未重置导致的格式问题
- js——全选框 checkbox
- cojs 安科赛斯特 题解报告
- 利用Abot爬虫和visjs 呈现漫威宇宙
- cJSON序列化工具解读一(结构剖析)
- JavaScript之web通信
- JSP EL表达式详细介绍
- 谈谈小白理解的js中的原型链问题
- JSP——JSP介绍以及运行原理
- 易被忽视的js事件问题总结