html+js实现图片上传前预先预览
2015-08-06 15:54
786 查看
<html> <head> <script type="text/javascript"> function setImagePreview() { var docObj=document.getElementById("doc"); var imgObjPreview=document.getElementById("<%=preview.ClientID%>"); if(docObj.files && docObj.files[0]){ //火狐下,直接设img属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '90px'; imgObjPreview.style.height = '120px'; //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 = "90px"; localImagId.style.height = "120px"; //图片异常的捕捉,防止用户修改后缀来伪造图片 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; } </script> </head> <body> <div id="localImag" style="width:130px;text-align:center; margin-left:auto; margin-right:auto;"><img id="preview" style="width:90px; height:120px;" runat="server" /></div> <p><input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"></p> </body>
相关文章推荐
- javascript实现3D变换的立体圆圈实例
- js操作数组方法
- javascript 入门之简单换肤效果
- JS异步处理 setTimeout / setInterval 比较
- js滚动条
- js监听事件
- js获取当前日期的前后几天
- jstl标签库
- 自定义JSP中的Taglib标签之四自定义标签中的Function函数
- JS浮点运算
- js 时间相减判断
- $.each遍历JSON和数组
- JS获取自定义属性data值
- javascript中 if(!-[1,])
- javaScript 网页特效 输出语句
- JavaScript实现自动弹出窗口并自动关闭窗口的方法
- JS提交表单
- JS控制animation事件
- Jackson 框架,轻易转换JSON
- JS实现从网页顶部掉下弹出层效果的方法