客户端js校验文件上传格式与文件大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Firefox3,IE6,IE7,IE8上传图片预览
        </title>
        <style type="text/css">
            #preview_wrapper{ 
                display:inline-block; width:300px; height:300px; background-color:#CCC;
            } 
            #preview_fake{ 
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
            } 
            #preview_size_fake{ 
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
                visibility:hidden; 
            } 
            #preview{ width:300px; height:300px; }
        </style>
        <script type="text/javascript">
            function onUploadImgChange(sender) {
                var filePath = sender.value;
                var fileExt = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                if (!checkFileExt(fileExt)) {
                    alert("您上传的文件不是图片,请重新上传！");
                    return;
                }

                var objPreview = document.getElementById('preview');
                var objPreviewFake = document.getElementById('preview_fake');
                var objPreviewSizeFake = document.getElementById('preview_size_fake');
                try {
                    if (sender.files && sender.files[0]) {
                        objPreview.style.display = 'block';
                        objPreview.style.width = 'auto';
                        objPreview.style.height = 'auto';

                        // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
                        objPreview.src = sender.files[0].getAsDataURL();
                        //读取图片文件大小
                        fileSize = sender.files[0].fileSize;
                        checkFileSize(sender, fileSize);

                    } else if (objPreviewFake.filters) {
                        // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
                        //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

                        // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
                        sender.select();
                        var imgSrc = document.selection.createRange().text;

                        objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
                        objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

                        autoSizePreview(objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
                        objPreview.style.display = 'none';
                        //读取图片文件大小               
                        var sh = setInterval(function() {
                            var img = document.createElement("img");
                            img.src = imgSrc;
                            fileSize = img.fileSize;
                            if (fileSize > 0) {
                                checkFileSize(sender, fileSize);
                                clearInterval(sh);
                            }
                            img = null;
                        },
                        100);
                    }
                } catch(e) {
                    alert("您上传的文件过大或者不是图片,请重新上传！");
                }
            }

            function onPreviewLoad(sender) {
                autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
            }

            function autoSizePreview(objPre, originalWidth, originalHeight) {
                var zoomParam = clacImgZoomParam(300, 300, originalWidth, originalHeight);
                objPre.style.width = zoomParam.width + 'px';
                objPre.style.height = zoomParam.height + 'px';
                objPre.style.marginTop = zoomParam.top + 'px';
                objPre.style.marginLeft = zoomParam.left + 'px';
            }

            function clacImgZoomParam(maxWidth, maxHeight, width, height) {
                var param = {
                    width: width,
                    height: height,
                    top: 0,
                    left: 0
                };

                if (width > maxWidth || height > maxHeight) {
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;

                    if (rateWidth > rateHeight) {
                        param.width = maxWidth;
                        param.height = height / rateWidth;
                    } else {
                        param.width = width / rateHeight;
                        param.height = maxHeight;
                    }
                }

                param.left = (maxWidth - param.width) / 2;
                param.top = (maxHeight - param.height) / 2;

                return param;
            }

            function checkFileSize(sender, fileSize) {
                if (fileSize > 1*1024*1024) {
                    alert("您上传的文件过大,请上传小于1M的图片！");
                    cleanFile(sender);
                    return false;
                }
                return true;
            }

            function checkFileExt(ext) {
                if (!ext.match(/.jpg|.gif|.png|.bmp/i)) {
                    return false;
                }
                return true;
            }

            function cleanFile(_file) {
                //var _file = document.getElementById(id);             
                if (_file.files) {
                    _file.value = "";
                } else {
                    if (typeof _file != "object") return null;
                    var _span = document.createElement("span");
                    _span.id = "__tt__";
                    _file.parentNode.insertBefore(_span, _file);
                    var tf = document.createElement("form");
                    tf.appendChild(_file);
                    document.getElementsByTagName("body")[0].appendChild(tf);
                    tf.reset();
                    _span.parentNode.insertBefore(_file, _span);
                    _span.parentNode.removeChild(_span);
                    _span = null;
                    tf.parentNode.removeChild(tf);
                }
            }
        </script>
    </head>
    <body>
        <div id="preview_wrapper">
            <div id="preview_fake">
                <img id="preview" onload="onPreviewLoad(this)" />
            </div>
        </div>
        <br/>
        <input id="upload_img" type="file" onchange="onUploadImgChange(this)" />
        <br/>
        <img id="preview_size_fake" />
    </body>

</html>
posted @ 2011-08-14 18:22  blueKnight  Views(1000)  Comments(0)  Edit  收藏  举报