js判断图片上传时的文件大小，和宽高尺寸 |
您所在的位置：网站首页 › vue判断文件大小 › js判断图片上传时的文件大小，和宽高尺寸 |
|
今天在做图片上传的小功能，使用了一个kissy上传组件。很好奇它是如何在图片上传前，检测到图片的大小和尺寸的？我们来写个小实例实现一下吧
如何读取图片的size
首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图： 这样的话，我们就可以检测到size。 var fileData = file.files[0]; var size = fileData.size; //注意，这里读到的是字节数 var isAllow = false; var maxSize = Max_Size; maxSize = maxSize * 1024; //转化为字节 isAllow = size = Max_Height; 79 showTip2(isAllow); 80 }; 81 image.src= data; 82 }; 83 reader.readAsDataURL(fileData); 84 85 }else{ 86 //IE下使用滤镜来处理图片尺寸控制 87 //文件name中IE下是完整的图片本地路径 88 var input = D.get('#uploader'); 89 //var input = uploader.get('target').all('input').getDOMNode(); 90 input.select(); 91 //确保IE9下，不会出现因为安全问题导致无法访问 92 input.blur(); 93 var src = document.selection.createRange().text; 94 var img = $('').appendTo('body').getDOMNode(); 95 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; 96 var width = img.offsetWidth; 97 var height = img.offsetHeight; 98 $(img).remove(); 99 100 isAllow = width >= Max_Width && height >= Max_Height; 101 showTip2(isAllow); 102 } 103 104 } 105 106 function showTip1(isAllow){ 107 var tipEl = D.get('#tip1'), 108 html = ''; 109 if(isAllow){ 110 html = '大小通过'; 111 }else{ 112 html = '大小未通过，要求'+ Max_Size +''; 113 } 114 D.html(tipEl,html); 115 } 116 117 function showTip2(isAllow){ 118 var tipEl = D.get('#tip2'), 119 html = ''; 120 121 if(isAllow){ 122 html += '宽高通过'; 123 }else{ 124 html += '宽高未通过，要求width:'+ Max_Width +', height:'+ Max_Height; 125 } 126 D.html(tipEl,html); 127 } 128 129 130 }) 131 132 133 134
相关文章： kissy uploader组件的有关校验的 源码地址：https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.js http://www.oschina.net/code/snippet_1242747_23669 http://www.oschina.net/code/snippet_819257_22844 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |