คำนำ:
มันมักจะใช้ในโครงการเพื่ออัปโหลดไฟล์ภาพถ่ายและฟังก์ชั่นอื่น ๆ และขนาดของไฟล์ที่อัปโหลดจะต้องมี จำกัด ปลั๊กอินจำนวนมากจะใช้การตรวจสอบการร้องขอพื้นหลังและการตรวจสอบ JS front-end ค่อนข้างเล็ก บทความนี้แนะนำวิธี JS front-end เพื่อตัดสินขนาดไฟล์อัปโหลดได้อย่างง่ายดาย
นี่คือดีกว่า
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javascript"> var isie = /msie/i.test(navigator.useragent) && ฟังก์ชั่น fileChange (เป้าหมาย, 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 ถ้า (filepath) {var isnext = false; var fileend = filepath.substring (filepath.indexof (".")); if (fileTypes && fileTypes.Length> 0) {สำหรับ (var i = 0; i <fileTypes.length; i ++) {ถ้า (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)) {แจ้งเตือน ("ไฟล์แนบไม่มีอยู่โปรดกลับเข้ามาอีกครั้ง!"); กลับเท็จ; } var file = filesystem.getFile (filePath); filesize = file.size; } else {filesize = target.files [0] .size; } var size = filesize / 1024; if (ขนาด> fileMaxSize) {Alert ("ขนาดสิ่งที่แนบไม่สามารถมากกว่า" + fileMaxSize / 1024 + "M!"); target.value = ""; กลับเท็จ; } if (size <= 0) {Alert ("ขนาดสิ่งที่แนบไม่สามารถเป็น 0m!"); target.value = ""; กลับเท็จ; }} </script> </head> <body> <input type = "file" name = "contractFileName" onChange = "fileChange (นี่);"/> </body> </html>ไม่แนะนำรหัสต่อไปนี้
รหัสนั้นง่ายมาก กุญแจสำคัญคือวิธีการใช้ JS เพื่อรับไฟล์และรับขนาดไฟล์จากนั้นตัดสินและสกัดกั้น เนื่องจากเหตุผลทางประวัติศาสตร์ที่หลากหลายเช่นปัจจัยการควบคุมของ ActiveX และวิธีการรับไฟล์อาจแตกต่างจากเบราว์เซอร์อื่นดังนั้นจึงจำเป็นต้องมีการตัดสินเพียงเล็กน้อย
รหัส JS:
<script type = "text/javascript"> // พิจารณาว่าเป็นเบราว์เซอร์ IE: /msie/i.test(navigator.useragent) เป็น var ปกติที่เรียบง่าย isie = /msie/i.test(navigator.useragent) &&! window.opera; ฟังก์ชั่น FileChange (เป้าหมาย) {var filesize = 0; if (isie &&! target.files) {// ie browser var var filepath = target.value; // รับพา ธ แบบสัมบูรณ์ไปยังไฟล์ที่อัปโหลด/** * ActiveXObject วัตถุเป็นวัตถุ JS ที่เข้ากันได้กับ IE และ Opera * การใช้งาน: * var newObj = new ActiveXObject (servername.typename [ตำแหน่ง]) * โดยที่ newObj เป็นตัวเลือกที่จำเป็น ส่งคืนชื่อตัวแปรของวัตถุ ActiveXObject * Servername เป็นสิ่งจำเป็น ระบุชื่อของแอปพลิเคชันที่วัตถุนั้น * Typename เป็นสิ่งจำเป็น ประเภทหรือคลาสของวัตถุที่จะสร้าง * ตำแหน่งเป็นทางเลือก ชื่อของเซิร์ฟเวอร์เครือข่ายที่สร้างวัตถุ * /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Easly///////////////////////////-1 ของ IIS ใช้ในการใช้งานดิสก์โฟลเดอร์หรือไฟล์ข้อความ* มีวิธีการ newobj และแอตทริบิวต์ที่ส่งคืนในมัน* ตัวอย่างเช่น: var file = newobj.createtextfile ("c: /test.txt" จริง) พารามิเตอร์ที่สองระบุว่าไฟล์เป้าหมายถูกเขียนทับ file.close (); */ var filesystem = new ActiveXObject ("Scripting.FilesYstemObject"); // เมธอด GetFile (PATH) ได้รับไฟล์จากดิสก์และส่งคืน var file = filesystem.getFile (filePath); filesize = file.size; // ขนาดไฟล์, หน่วย: b} else {// non-ie เบราว์เซอร์ filesize = target.files [0] .size; } var size = filesize / 1024 /1024; ถ้า (ขนาด> 1) {แจ้งเตือน ("สิ่งที่แนบมาไม่เกิน 1m"); }} </script>รหัส HTML
การคัดลอกรหัสมีดังนี้:
<input type = "file" onChange = "FileChange (นี่);"/>
วิธีที่เรียบง่ายน้ำหนักเบาและรวดเร็วในการใช้รหัส JS เพื่อตัดสินขนาดไฟล์ก็โอเค สำหรับผู้ที่สนใจวัตถุ ActiveXObject คุณสามารถไปได้ลึกขึ้น มันสามารถส่งคืนวัตถุที่แตกต่างกันตามพารามิเตอร์ที่ป้อน โดยปกติแล้วฟังก์ชั่นและฟังก์ชั่นของวัตถุก็มีประโยชน์และทรงพลังเช่นกัน
นั่นคือทั้งหมดสำหรับบทความนี้ มันเป็นรหัสที่ง่ายและใช้งานได้จริงหรือไม่? ฉันหวังว่าคุณจะชอบมัน