js上传图片预览的实现方法
时间:2019-03-30
本文章向大家介绍js上传图片预览的实现方法,主要包括js上传图片预览的实现方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了js上传图片预览的方法,供大家参考,具体内容如下
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片上传本地预览</title> <style type="text/css"> #preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} </style> <script type="text/javascript"> //图片上传预览 IE是用了滤镜。 function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead>'; 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="preview"> <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'> </div> <input type="file" onchange="previewImage(this)" /> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- ExtJs学习笔记(14)_Column布局
- 高级盲注—floor,rand,group by报错注入
- 刷脸注册、试装、支付……仅靠一张脸就能买买买的时尚店开业了
- JavaScript引用类型之Array数组之强大的splice()方法
- Linux快速入门03-系统管理
- JavaScript引用类型之Array数组的concat()和push()方法的区别
- JavaScript引用类型之Array数组的排序方法
- Linux快速入门02-文件系统管理
- JavaScript引用类型之Array数组的toString()和valueof()方法的区别
- Linux快速入门04-扩展知识
- JavaScript引用类型之Array数组的拼接方法-concat()和截取方法-slice()
- JavaScript引用类型之Array数组的拼接方法-concat()和截取方法-slice()
- 比特币在2017全球新闻谷歌搜索中排名第二,韩国政府聚焦比特币市场诈骗和假冒交易所
- ExtJs学习笔记(13)_Card布局
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux在丢失的情况下重置密码的教程
- Linux内核宏container_of的深度剖析
- CentOS 7.3配置Nginx虚拟主机的方法步骤
- Linux下alias命令的用法详解
- Linux搭建自己Nexus私服的实现方法
- centos7系统nginx服务器下phalcon环境搭建方法详解
- Logrotate实现Catalina.out日志每俩小时切割示例
- Linux常见问题解决方案汇总
- Linux中文件/文件夹无法删除的解决方案
- GNU Parallel的具体使用
- crontab定时任务不执行的原因分析与解决方法
- 在Linux中安装ASPNET.Core3.0运行时的示例代码
- linux Bash脚本判别使用者的身份方法示例
- 配置Linux使用LDAP用户认证的方法
- linux Dig命令使用大全