Home > Developer > Web Develop
First, the native input file control has a Files property, which is an array. The elements in the array have the following properties: Lastmodifieddate,name,size,type,webkitrelativepath,
In this case, we can detect the size.
var fileData = file.files[0]; var size = filedata.size; // Note that the number of bytes read here is var false ; var maxSize == maxSize * 1024x768; // Convert to byte isallow = size <= maxSize;
– Compatibility: IE9 cannot read input file.files this property. Thinking: What to do?
How to read the width,height of a picture123<title> Testing </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>78<body>9 Ten<form action= "" method= "POST" > One<input type= "file" id= "uploader"/> A<input type= "Submit" id= "Submit"/> -</form> -<div id= "Tip1" ></div> the<div id= "TIP2" ></div> -<script> - - //http://www.oschina.net/code/snippet_819257_22844 + //Https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.js -Kissy.use (' Core ',function(S) { + var$ = s.all, D =S.dom; A varmax_size = 2000;//2M at varMax_width = 100;//100px - varMax_height = 200;//200px - -$ (' #submit '). On (' click ',function(EV) { - Ev.halt (); - varFileel = D.get (' #uploader '); in - Console.log (fileel.files); to + testmaxsize (fileel); - testwidthheight (fileel); the }) * $ functiontestmaxsize (file) {Panax Notoginseng if(File.files && File.files[0]){ - varFileData = File.files[0]; the + varsize = Filedata.size;//Note that the number of bytes read here is A varIsallow =false; the if(!size) Isallow =false; + - varMaxSize =max_size; $MaxSize = maxSize * 1024;//Convert to bytes $Isallow = Size <=maxSize; - - showTip1 (isallow); the -}Else{Wuyi /*upload with iframe under IE9 .*/ the /* - //or in the form of a face Wu //var img = new Image (); - //again with Img.src=filepath, and then use Img.filesize to take, here do not write, the reader self-practice About */ $ - } - - } A + functiontestwidthheight (file) { the varIsallow =false; - Debugger; $ the if(File.files && File.files[0]){ the varFileData = File.files[0]; the the //reading picture Data - varReader =NewFileReader (); inReader.onload =function(e) { the vardata =E.target.result; the //load picture to get the true width and height of the picture About varImage =NewImage (); theImage.onload=function(){ the varwidth =Image.width; the varHeight =Image.height; +Isallow = width >= max_width && height >=Max_height; - showTip2 (isallow); the };BayiImage.src=data; the }; the Reader.readasdataurl (fileData); - -}Else{ the //use filters to handle picture size control under IE the //file name in IE is the full local path to the picture the varinput = D.get (' #uploader '); the //var input = uploader.get (' target '). All (' input '). Getdomnode (); - Input.select (); the //Make sure that IE9 does not occur because of a security issue that makes it inaccessible the Input.blur (); the varsrc =Document.selection.createRange (). text;94 varimg = $ (' '). AppendTo (' body '). Getdomnode (); theImg.filters.item (' DXImageTransform.Microsoft.AlphaImageLoader '). src =src; the varwidth =Img.offsetwidth; the varHeight =Img.offsetheight;98 $ (IMG). Remove (); About -Isallow = width >= max_width && height >=Max_height;101 showTip2 (isallow);102 }103 104 } the 106 functionShowTip1 (isallow) {107 varTipel = D.get (' #tip1 '),108html = ' ';109 if(isallow) { thehtml = ' size by </br> ';111}Else{ thehtml = ' size failed ', request ' + max_size + ' </br> ';113 } the d.html (tipel,html); the } the 117 functionshowTip2 (isallow) {118 varTipel = D.get (' #tip2 '),119html = ' '; - 121 if(isallow) {122HTML + = ' wide-height through ';123}Else{124HTML + = ' Wide height failed, requires width: ' + max_width + ', Height: ' +Max_height; the }126 d.html (tipel,html);127 } - 129 the })131 the</script>133</body>134Related articles:
Kissy Uploader component of the source code address of the calibration: 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
JS to determine the file size of the uploaded image, and the width of the high size
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
