上传图片预览

Posted 2020-07-08 webnote

<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>