上传图片并限制图片的大小

引入imageFile.js用于限制上传图片的大小，调用它的checkFileTypeAndsize方法

$(function () {//上传图片
    var showimg = $('.imgShow');//放置上传的图片
    var spanTips = $(".spanTips");//图片上传出现的提示
    $("#fileVideo").wrap("<form id='myupload' action='/video/upload' method='post' enctype='multipart/form-data'></form>");
$("#fileVideo").checkFileTypeAndSize({
allowedExtensions: ['jpg','png','gif'],
maxSize: 2000,
success: function() {
$("#myupload").ajaxSubmit({
url:'/video/upload',
dataType:  'json',
success: function(data) {
if(data.status=="success") {
$('.imgShow').css("display","block");
var img = data.img;
showimg.attr("src", img);//把上传的图片的路径赋值给showimg
$('.addrImg').attr("value", data.img);//把图片的名称放到addrImg的value中
spanTips.html("上传成功");
}else{
spanTips.html(data.message);
}
},
error:function(xhr){
spanTips.html("上传失败,格式应为：jpg、png、gif且图片不大于2MB");
}
});
},
extensionerror: function() {
spanTips.html('允许的格式为：jpg、png、gif，请您重新选择图片上传！');
return false;
},
sizeerror: function() {
spanTips.html('图片最大不能超过2MB,请您重新选择图片上传！');
return false;
}
});
$("#upBtn").click(function(){//上传视频表单提交
var videoTitle=$("input[name='videoTitle']").val();//视频标题
var videoLink=$("input[name='videoLink']").val();//视频链接
var imgShow=$(".imgShow").attr("src");//视频缩略图
if(videoTitle==""){
layer.msg("视频标题不能为空", {icon: 2});
}else if(videoLink==""){
layer.msg("视频链接不能为空", {icon: 2});
}else if(imgShow==""){
layer.msg("视频视频缩略图不能为空", {icon: 2});
}else{
$("#upForm").submit();
}
});
});

imageFile.js

(function ($) {
    $.fn.checkFileTypeAndSize = function (options) {
        //默认设置
        var defaults = {
            allowedExtensions: [],
            maxSize: 1024, //单位是KB，默认最大文件尺寸1MB=1024KB
            success: function () { },
            extensionerror: function () { },
            sizeerror: function () { }
        };
        //合并设置
        options = $.extend(defaults, options);
        //遍历元素
        return this.each(function () {
            $(this).on('change', function () {
                //获取文件路径
                var filePath = $(this).val();
                //小写字母的文件路径
                var fileLowerPath = filePath.toLowerCase();
                //获取文件的后缀名
                var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') + 1);
                //判断后缀名是否包含在预先设置的、所允许的后缀名数组中
                if ($.inArray(extension, options.allowedExtensions) == -1) {
                    options.extensionerror();
                    $(this).focus();
                } else {
                    try {
                        var size = 0;
                        if (/msie/.test(navigator.userAgent.toLowerCase())) {//ie旧版浏览器
                            var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
                            var fileObj = fileMgr.getFile(filePath);
                            size = fileObj.size; //byte
                            size = size / 1024;//kb
                            //size = size / 1024;//mb
                        } else {//其它浏览器
                            size = $(this)[0].files[0].size;//byte
                            size = size / 1024;//kb
                            //size = size / 1024;//mb
                        }
                        if (size > options.maxSize) {
                            options.sizeerror();
                        } else {
                            options.success();
                        }
                    } catch (e) {
                        alert("错误：" + e);
                    }
                }
            });
        });
    };
})(jQuery);