js实现上传图片及时预览
来源:互联网 发布:java am pm 编辑:程序博客网 时间:2024/06/05 07:41
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> #preview{ width:90px; height:90px; border:1px solid #dcdcdc; border-radius:5px; overflow:hidden; } #preview img{ height:90px; margin:auto; overflow:hidden; } </style> <title></title> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script> //图片上传预览 IE是用了滤镜。 function previewImage(file) { var MAXWIDTH = 90; var MAXHEIGHT = 90; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>'; var img = document.getElementById('imghead'); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height;// img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else //兼容IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead>'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ){ rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ){ param.width = maxWidth; param.height = Math.round(height / rateWidth); }else{ param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); /*param.top = Math.round((maxHeight - param.height) / 2);*/ return param; } </script></head><body><div id="addCommodityIndex"> <!--input-group start--> <div class="input-group row"> <div class="col-sm-3"> <label>商品图片</label> </div> <div class="col-sm-9 big-photo"> <div id="preview"> <img id="imghead" border="0" src="img/photo_icon.png" width="90" height="90" onclick="$('#previewImg').click();"> </div> <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg"> <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">--> </div> </div> <!--input-group end--></div></body></html>
0 0
- [JavaScript] JS实现上传图片及时预览
- js实现上传图片及时预览
- js实现上传图片及时预览
- js实现上传图片及时预览
- js实现上传图片的及时预览
- jquery+js实现图片上传及时预览
- 图片上传及时预览
- js实现图片上传预览
- js实现图片上传预览
- js实现图片上传预览
- js实现图片上传预览
- js上传图片预览实现
- js实现图片上传预览
- js实现图片上传预览
- [JS]实现图片上传预览
- struts2 图片上传至服务器 页面预览及页面及时图片预览功能实现方式
- js实现上传时图片的预览
- JS实现图片上传前预览
- CRM状态相关表
- Django提交表单报错-CSRF token missing or incorrect.
- 2017Android通用流行框架大全
- Android7.0的SSL自签名证书问题
- 墙上的门-算法设计与分析基础2.2
- js实现上传图片及时预览
- 性能测试模型
- c++ primer Sales_item.h & 练习 1.20、1.21、1.22
- TCP三次握手/四次挥手详解
- android ActionBar自定义CustomView
- sql优化 同步数据
- 自订标签库--TagSupport详解
- My "first Tech" blog
- 3个著名加密算法(MD5、RSA、DES)的解析