js实现图片上传本地预览

演示地址：https://xibushijie.github.io/static/uploadImg.html

<!DOCTYPE>
<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=auto border=0 src='a1.png'></div><input type="file" onchange="previewImage(this)" />
</body></html>

转载于:https://www.cnblogs.com/wangjae/p/11195251.html

js实现图片上传本地预览相关推荐

图片上传本地预览(回显)插件
图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
js实现网页图片上传本地预览
[实现效果] [相关代码] [HTML] <div id="preview"><div class="single_pic" id=" ...
js html怎么加入图片,js实现图片上传并预览功能
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个标签,在图片上传之后,用新图片的src替换原来标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...

js实现图片上传本地预览

js实现图片上传本地预览相关推荐

最新文章

热门文章