前几天在做 input[type='file'] 上传图片时，需要检测上传文件的内存大小，写了一个小demo，在此做一总结：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文件上传大小检测</title> </head> <body> <input name="txtName" type="file" multiple accept="image/*" id="pic" onchange="loadImage(this)" /> <script> function loadImage(img) { var filePath = img.value; var fileExt = filePath.substring(filePath.lastIndexOf(".")) .toLowerCase(); if (!checkFileExt(fileExt)) { alert("您上传的文件不是图片,请重新上传！"); img.value = ""; return; } if (img.files && img.files[0]) { // alert(img); // alert(img.files[0]) alert('你选择的文件大小' + (img.files[0].size / 1024).toFixed(0) + "kb"); } else { img.select(); var url = document.selection.createRange().text; try { var fso = new ActiveXObject("Scripting.FileSystemObject"); } catch (e) { alert('如果你用的是ie8以下 请将安全级别调低！'); } alert("文件大小为：" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb"); } } function checkFileExt(ext) { if (!ext.match(/.jpg|.gif|.png|.bmp/i)) { return false; } return true; } </script> </body> </html>
上传文件之后浏览器显示：
之后又发现了其他大牛的全能博客：