文件格式和大小校驗、圖片上傳前在瀏覽器端進行預覽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();
});