码迷,mamicode.com
首页 > Web开发 > 详细

上传图片预览

时间:2016-05-19 14:50:49      阅读:174      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!