머리말:
프로젝트에서 파일, 사진 및 기타 기능을 업로드하는 데 종종 사용되며 업로드 된 파일의 크기는 제한되어야합니다. 많은 플러그인은 배경 요청 확인을 사용하고 프론트 엔드 JS 검증은 비교적 작습니다. 이 기사는 업로드 파일 크기를 쉽게 판단하기위한 프론트 엔드 JS 방법을 소개합니다.
이것은 더 좋습니다
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <script type = "text/javaScript"> var isie = /msie/i.test(navigator.useragent) &&! window.opera; 함수 filechange (target, id) {var filesize = 0; var filetypes = [ ".jpg", ".png", ".rar", ".txt", ".zip", ".doc", ".ppt", ".xls", ".pdf", ".docx", ".xlsx"]; var filepath = target.value; var fileMaxsize = 1024 * 2; // 2m if (filepath) {var isnext = false; var fileend = filepath.substring (filepath.indexof ( ".")); if (filetypes && filetypes.length> 0) {for (var i = 0; i <filetypes.length; i ++) {if (filetypes [i] == fileend) {isnext = true; 부서지다; }}} if (! isnext) {alert ( "이 파일 유형이 허용되지 않습니다!"); target.value = ""; 거짓을 반환합니다. }} else {return false; } if (isie &&! target.files) {var filepath = target.value; var filesystem = new ActiveXobject ( "scripting.filesystemobject"); if (! filesystem.fileExists (filepath)) {alert ( "첨부 파일이 존재하지 않으면 다시 입력하십시오!"); 거짓을 반환합니다. } var file = filesystem.getFile (FilePath); filesize = file.size; } else {filesize = target.files [0] .Size; } var size = filesize / 1024; if (size> filemaxsize) {alert ( "첨부 파일 크기가" + filemaxsize / 1024 + "m!"보다 클 수 없습니다); target.value = ""; 거짓을 반환합니다. } if (size <= 0) {alert ( "첨부 파일 크기가 0m!"); target.value = ""; 거짓을 반환합니다. }} </script> </head> <body> <입력 유형 = "file"name = "contractFilename"onchange = "filechange (this);"/> </body> </html>다음 코드는 권장되지 않습니다
코드는 매우 간단합니다. 핵심은 JS를 사용하여 파일을 가져 와서 파일 크기를 가져온 다음 판단하고 가로 채는 방법입니다. 다양한 역사적 이유로 인해 IE의 ActiveX 제어 요소와 파일을 얻는 방법은 다른 브라우저와 다를 수 있으므로 약간의 판단이 필요합니다.
JS 코드 :
<script type = "text/javaScript"> // IE 브라우저인지 결정 : /msie/i.test(navigator.useragent)는 간단한 일반 var isie = /msie/i.test(navigator.useragent) &&! window.opera; 함수 filechange (target) {var filesize = 0; if (isie ·& target.files) {// 즉, 브라우저 var filepath = target.value; // 업로드 된 파일의 절대 경로를 가져옵니다./** * ActiveXobject 객체는 ie 및 opera와 호환되는 js 객체입니다. * var newobj = new ActiveXobject (servername.typename [, location]) * 여기서 NewOBJ가 필요한 옵션입니다. ActiveXobject 객체의 변수 이름을 반환합니다. * ServerName은 필수입니다. 객체의 응용 프로그램 이름을 제공합니다. * 타입 이름은 필수입니다. 생성 할 객체의 유형 또는 클래스. * 위치는 선택 사항입니다. 객체를 만든 네트워크 서버의 이름. *//////////////////////////////////////////////////////////////////////////////////////////////////// * Scripting.FileSystemObject is a built-in 디스크, 폴더 또는 텍스트 파일을 작동하는 데 사용되는 IIS의 구성 요소* 예 : var file = newObj.creatextFile ( "c : /test.txt", true)이 많은 NewOBJ 메소드와 속성이 있습니다. file.close (); */ var filesystem = new ActiveXobject ( "scripting.filesystemobject"); // getFile (path) 메소드는 디스크에서 파일을 가져 와서 반환합니다. var file = fileSystem.getFile (FilePath); filesize = file.size; // 파일 크기, 단위 : b} else {// nonie browser filesize = target.files [0] .size; } var size = filesize / 1024 / 1024; if (size> 1) {alert ( "첨부 파일이 1m보다 클 수 없습니다"); }} </script>HTML 코드
코드 사본은 다음과 같습니다.
<input type = "file"onchange = "filechange (this);"/>
JS 코드를 사용하여 파일 크기를 판단하는 간단하고 가볍고 빠른 방법은 괜찮습니다. ActiveXobject 객체에 관심이있는 사람들은 더 깊이 갈 수 있습니다. 입력 한 매개 변수에 따라 다른 객체를 반환 할 수 있습니다. 일반적으로 객체의 기능과 기능도 매우 유용하고 강력합니다.
이 기사의 전부입니다. 매우 간단하고 실용적인 코드입니까? 나는 당신이 그것을 좋아하기를 바랍니다.