摘自：http://www.cnblogs.com/summer_shao/p/4418282.html
今天在做圖片上傳的小功能，使用了一個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 <= maxSize;
– 兼容性：ie9下讀不到input file.files這個屬性。思考：怎么辦？
如何讀取圖片的width,height
- 圖片真實的寬度和高度，可以通過實例化Image對象、加載src 來獲取。
- 兼容性：IE下使用濾鏡來處理圖片尺寸控制
全部代碼
1 <html>
2 <head>
3 <title>測試</title>
4 <meta charset="utf-8"/>
5 <link rel="stylesheet" href="http://g.tbcdn.cn/tb/global/2.9.1/global-min.css">
6 <script src="http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js"></script>
7 </head>
8 <body>
9
10 <form action="" method="post">
11 <input type="file" id="uploader"/>
12 <input type="submit" id="submit"/>
13 </form>
14 <div id="tip1"></div>
15 <div id="tip2"></div>
16 <script>
17
18 //http://www.oschina.net/code/snippet_819257_22844
19 //https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.js
20 KISSY.use('core',function(S){
21 var $ = S.all, D = S.DOM;
22 var Max_Size = 2000; //2M
23 var Max_Width = 100; //100px
24 var Max_Height = 200; //200px
25
26 $('#submit').on('click',function(ev){
27 ev.halt();
28 var fileEl = D.get('#uploader');
29
30 console.log(fileEl.files);
31
32 testMaxSize(fileEl);
33 testWidthHeight(fileEl);
34 })
35
36 function testMaxSize(file){
37 if(file.files && file.files[0]){
38 var fileData = file.files[0];
39
40 var size = fileData.size; //注意，這里讀到的是字節數
41 var isAllow = false;
42 if(!size) isAllow = false;
43
44 var maxSize = Max_Size;
45 maxSize = maxSize * 1024; //轉化為字節
46 isAllow = size <= maxSize;
47
48 showTip1(isAllow);
49
50 }else{
51 /*... ie9下用iframe上傳*/
52 /*
53 // 或者用以面的方式實現
54 // var img = new Image();
55 // 再用img.src=filepath,再用img.fileSize用取，這里不寫啦，讀者自行實踐一下
56 */
57
58 }
59
60 }
61
62 function testWidthHeight(file){
63 var isAllow = false;
64 debugger;
65
66 if(file.files && file.files[0]){
67 var fileData = file.files[0];
68
69 //讀取圖片數據
70 var reader = new FileReader();
71 reader.onload = function (e) {
72 var data = e.target.result;
73 //加載圖片獲取圖片真實寬度和高度
74 var image = new Image();
75 image.onload=function(){
76 var width = image.width;
77 var height = image.height;
78 isAllow = width >= Max_Width && height >= 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 = $('<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:300px;visibility:hidden;" />').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 = '大小通過</br>';
111 }else{
112 html = '大小未通過，要求'+ Max_Size +'</br>';
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 </script>
133 </body>
134 </html>
相關文章：
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