zoukankan      html  css  js  c++  java
  • jQuery File Upload 判断图片尺寸,限定图片宽高的办法

    1.必须熟读jQuery File Upload 文档,在add方法中进行判断,如果不符合条件,就用 data.abort()方法取消上传动作。

    $("file").fileupload({...}).on('fileuploadadd', function (e, data) {
            var files=data.files;
                if(navigator.userAgent.indexOf("MSIE 8.0")>0 || navigator.userAgent.indexOf("MSIE 9.0")>0){
                    var objPreviewSizeFake = $('<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);300px;visibility:hidden;"  />').appendTo('body').getDOMNode();
                    objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                    //var objPreviewSizeFake = $(".conImage").get(0);//jquery对象转化为DOM对象
                    var fileupload = document.getElementById("head");
                    var $fileupload = $(fileupload);
                    $fileupload.select();
                    $fileupload.blur();
                    path = document.selection.createRange().text;
    
                    if (/"wW"/.test(path)) {
                        path = path.slice(1,-1);
                    }
    
                    objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path;
                    width_${fileInputId}=objPreviewSizeFake.offsetWidth;
                    height_${fileInputId}=objPreviewSizeFake.offsetHeight;
                    if(width_${fileInputId}> 800 || height_${fileInputId}> 800){
                        alert("上传的图片的宽和高都不能超过800px,当前图片高度"+width_${fileInputId}+"px,宽度"+height_${fileInputId}+"px,请裁剪后再上传。否则无法通过审核噢。");
                        data.abort();
                    }
                    document.selection.empty();
                }else{
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        var reader = new FileReader();
                        var ret = [];
                        reader.onload = function(theFile) {
                            var image = new Image();
                            image.onload = function() {
                                width_${fileInputId}=this.width;
                                height_${fileInputId}=this.height;
                                if(width_${fileInputId}> 800 || height_${fileInputId}> 800){
                                    alert("上传的图片的宽和高都不能超过800px,当前图片高度"+width_${fileInputId}+"px,宽度"+height_${fileInputId}+"px,请裁剪后再上传。否则无法通过审核噢。");
                                    data.abort();
                                }
                            };
                            image.src = theFile.target.result;
                        }
                        reader.readAsDataURL(file);
                    }
                }
        })

    2.参考:

    http://www.imooc.com/article/12798

  • 相关阅读:
    算法训练 P1103
    算法训练 表达式计算
    算法训练 表达式计算
    基础练习 时间转换
    基础练习 字符串对比
    Codeforces 527D Clique Problem
    Codeforces 527C Glass Carving
    Codeforces 527B Error Correct System
    Codeforces 527A Glass Carving
    Topcoder SRM 655 DIV1 250 CountryGroupHard
  • 原文地址:https://www.cnblogs.com/luodengxiong/p/6491969.html
Copyright © 2011-2022 走看看