【JS】文件格式和大小校验、图片上传前在浏览器端进行预览jquery-file-duson.js

一.文件校验预览

1.文件格式和大小校验

2.图片上传前在浏览器端进行预览

/* 
    功能说明：
        图片上传前本地预览,可限制图片大小和文件格式
 
    参数说明:  
        Img:图片ID; 
        Width:预览宽度; 
        Height:预览高度; 
        SizeLimit:文件限制的最大文件大小，单位K 
        ImgType:支持文件类型; 
        Callback:选择文件显示图片后回调方法 
 
    调用例子:
        $(function () { 
            $("#up").uploadPreview({
                Img: "ImgPr", 
                Width: 200, 
                Height:200,
                ImgType: ["gif", "jpeg", "jpg", "bmp", "png","ico"],
                Callback: function () { },
                SizeLimit:1024
            }); 
        }); 
 
*/
jQuery.fn.extend({
    uploadPreview: function (opts) {
        var _self = this, _this = $(this);
        opts = jQuery.extend({
            Img: "ImgPr",
            Width: 100, Height: 100,
            ImgType: ["gif", "jpeg", "jpg", "bmp", "png",'ico'],
            SizeLimit: 1024,
            Callback: function () { }
        }
        , opts || {});
        _self.getObjectURL = function (file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            }
            else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            }
            else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        };
        _this.change(function () {
            if (this.value) {
                if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
                    this.value = "";
                    this.outerHTML += ''
                    return false
                }
                var fileObj = this;
                var img = document.createElement("img");
                fileObj.insertBefore(img, null);
                img.dynsrc = fileObj.value;
                var size = img.fileSize || fileObj.files[0].fileSize || fileObj.files[0].size;
                if (size > opts.SizeLimit * 1024) {
                    alert("选择文件错误,图片大小必须小于" + opts.SizeLimit + "K");
                    this.value = "";
                    this.outerHTML += ''
                    return false
                }
                if ($.browser.msie) {
                    try {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                    }
                    catch (e) {
                        var src = "";
                        var obj = $("#" + opts.Img);
                        var div = obj.parent("div")[0];
                        _self.select();
                        if (top != self) {
                            window.parent.document.body.focus()
                        }
                        else {
                            _self.blur()
                        }
                        src = document.selection.createRange().text;
                        document.selection.empty();
                        obj.hide();
                        obj.parent("div").css({
                            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)', 'width': opts.Width + 'px', 'height': opts.Height + 'px'
                        });
                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
                    }
                }
                else {
                    $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                }
                opts.Callback()
            }
        })
    }
});
 
 
/*
 * 校验文件上传限制大小和文件格式
 * 例子： 
        <input type="file" class="fileValidate" allowFileExt=".txt,.html,.xls" allowFileSize="7"/>
 
        //使用默认值
        <input type="file" class="fileValidate" />
 *
 */
jQuery.fn.extend({
    fileValidate: function (opts) {
        var _self = this, _this = $(this);
        _self.getObjectURL = function (file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file)
            }
            else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file)
            }
            else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file)
            }
            return url
        };
        _this.change(function () {
            if (this.value) {
                if (_this.attr("allowFileExt") == null) {
                    allowFileExt = ["gif", "jpeg", "jpg", "bmp", "png", 'ico'];
                } else {
                    allowFileExt = _this.attr("allowFileExt").split(",");
                }
                if (!RegExp("\.(" + allowFileExt.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert("选择文件错误,文件类型必须是" + allowFileExt.join("，") + "中的一种");
                    this.value = "";
                    this.outerHTML += ''
                    return false
                }
 
                if (_this.attr("allowFileSize") == null) {
                    allowFileSize = 1024;
                } else {
                    allowFileSize = parseInt(_this.attr("allowFileSize"));
                }
                 
 
                var fileObj = this;
                var img = document.createElement("img");
                fileObj.insertBefore(img, null);
                img.dynsrc = fileObj.value;
                var size = img.fileSize || fileObj.files[0].fileSize || fileObj.files[0].size;
                if (size > allowFileSize * 1024) {
                    alert("选择文件错误,文件大小必须小于" + allowFileSize + "K");
                    this.value = "";
                    this.outerHTML += ''
                    return false
                }
            }
        })
    }
});
 
 /*
 * 为文件框绑定好校验文件类型和大小的事件
 */
$(function () {
    $("[type=file].fileValidate").fileValidate();
});