js 图片预览

  //file 为file传入的值(onchange="previewimg(this)")

 function previewimg(file) {
            var maxwidth = 70;
            var maxheight = 80;

            if (file.files && file.files[0]) {
                var extension = "." + file.files[0].name.split('.')[1];
                var result = $.inArray(extension, filetype);
                if (result == -1) {
                    alert("只能是.gif, .png, .jpg, .jpeg, .bmp等格式的图片");
                    return;
                }
    //pre_img 为 预览 img标签的id
                var img = document.getElementById('pre_img');
                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]);
            }
        }
        function clacImgZoomParam(maxwidth, maxheight, width, height) {
            var param = { top: 0, left: 0,  width, height: height };
            if (width > maxwidth || height > maxheight) {
                param.width = maxwidth;
                param.height = maxheight;
            }
            return param;
        }