您的位置:首页 > 其它

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

2016-06-03 13:55 309 查看
引入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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: