圖片上傳驗證 求指教不足之處

JS  方面

;
(function ($) {
    var imgtype = ['.png', '.jpg', '.jpeg'];
    var setting = {
        height: 28,
        width: 28,
        size: 2,
        imgtype: imgtype
    }

    $.fn.checkimg = function (option, callback) {

        setting = $.extend(setting, option);
        var _this = $(this);
        //驗證格式
        var filepath = _this.val();
        var extStart = filepath.lastIndexOf(".");
        var ext = filepath.substring(extStart, filepath.length).toUpperCase();
        if ($.inArray(ext.toLowerCase(), setting.imgtype) < 0) {
            b = setting.imgtype.join(",");
            callback("圖片限於" + b + "格式", false);
            return;
        }
        var file_size = 0;
        //驗證圖片大小  IE
        if (!+[1, ]) {
            var img = new Image();
            img.src = filepath;
            if (img.fileSize > 0) {
                if (img.fileSize * 1 / 1024 / setting.size, false) {
                    callback("圖片不大於" + setting.size + "MB。");
                    return;
                }
            }
            var height = img.height;
            var width = img.width;
            if (setting.height / setting.width != height / width, false) {
                callback('圖片尺寸爲:寬' + setting.height + "高" + setting.width);
                return;
            }
            callback('', true);
        } else {  //其他
            file_size = _this[0].files[0].size;
            var size = file_size / 1024 / 1024;
            if (size > setting.size) {
                callback("圖片不大於" + setting.size + "MB。", false);
                return;
            }

            var _URL = window.URL || window.webkitURL;
            var file, img;

            if ((file = _this[0].files[0])) {
                var _URL = window.URL || window.webkitURL;
                img = new Image();

                img.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    err(height, width);
                };
                img.src = _URL.createObjectURL(file);
            }
        }

        var err = function (height, width) {
            if (setting.height / setting.width != height / width) {
                callback('圖片尺寸爲:寬' + setting.height + "高" + setting.width, false);
                return;
            } else {
                callback('', true);
                return
            }
        }
    }
})(jQuery)





HTML

<input type='file' name='file' class='file'>

<script>

    $(function () {


        $('input[name="file"]').change(function () {
            var req = $(this).checkimg('', function (data, flag) {
                alert(data)
                alert(flag)
            });

        });

    })

</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章