首页 > Web开发 > 详细

上传图片预览

时间:2016-05-19 14:48:21      阅读:160      评论:0      收藏:0      [点我收藏+]
<script type="text/javascript">

        function previewImage(file) {
    var WIDTH = 80;
    var HEIGHT = 80;
    var div = document.getElementById(‘preview‘);
    if (file.files && file.files[0]) {
        div.innerHTML = ‘<img id=HeadImages>‘;
        var img = document.getElementById(‘HeadImages‘);
        img.onload = function () {
            var rect = clacImgZoomParam(WIDTH, HEIGHT, 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]);
    }
	}
</script>  

<form name="form5" id="form5" method="post" action="#">

<input type="file" name="file5" id="file5" onchange="previewImage(this)"/>
<div id="preview"></div>
</form>

 

上传图片预览

原文:http://www.cnblogs.com/webqiand/p/5508378.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!