zoukankan      html  css  js  c++  java

  • 客户端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,
                        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>
  • 相关阅读:
    python的ORM框架SQLAlchemy
    SQLAlchemy技术文档（中文版）-下
    SQLAlchemy技术文档（中文版）-上
    python的class的__str__和__repr__(转)
    虚拟化技术之KVM
    cobbler部署安装
    pxe+kickstart 无人值守安装CentOS7.1
    超详细saltstack安装部署及应用
    页面缓存
    db2 常用命令
  • 原文地址：https://www.cnblogs.com/ding0910/p/2138106.html
Copyright © 2011-2022 走看看