ฟังก์ชั่นการอัปโหลดภาพตัวอย่างส่วนใหญ่ใช้เพื่อดูตัวอย่างเอฟเฟกต์ก่อนที่จะอัปโหลดรูปภาพ ปัจจุบันวิธีการหลักส่วนใหญ่รวมถึงการใช้งาน JS, jQuery และ Flash แต่โดยทั่วไปเราใช้ JS เพื่อใช้ฟังก์ชั่นการอัปโหลดภาพตัวอย่าง มาดูตัวอย่างด้านล่าง
หลักการ:
มันถูกแบ่งออกเป็นสองขั้นตอน: เมื่ออินพุตของการอัปโหลดภาพถูกเรียกใช้และเลือกภาพท้องถิ่น URL (URL วัตถุ) ของวัตถุที่จะอัปโหลด; กำหนด URL วัตถุให้กับแอตทริบิวต์ SRC ของแท็ก IMG ที่เขียนไว้ล่วงหน้าเพื่อแสดงภาพ
ที่นี่เราจำเป็นต้องเข้าใจวัตถุไฟล์วัตถุ Blob และ window.url.createObjecturl () ใน JavaScript
ไฟล์ไฟล์:
วัตถุไฟล์สามารถใช้เพื่อรับข้อมูลเกี่ยวกับไฟล์และยังสามารถใช้ในการอ่านเนื้อหาของไฟล์ โดยทั่วไปวัตถุไฟล์มาจากวัตถุ FileList ที่ส่งคืนโดยผู้ใช้หลังจากเลือกไฟล์ในองค์ประกอบอินพุตหรืออาจเป็นวัตถุ DataTransfer ที่สร้างขึ้นโดยการลากและดร็อปฟรี
ลองมาดูการรับวัตถุ filelist:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript" src = "jQuery.js"> </script>
<อินพุต id = "อัปโหลด" type = "ไฟล์">
<img id = "ดูตัวอย่าง" src = "">
<script type = "text/javascript">
$ ('#upload') เปลี่ยน (function () {
// รับองค์ประกอบแรกของ FileList
การแจ้งเตือน (document.getElementById ('อัปโหลด') ไฟล์ [0]);
-
</script>
วัตถุหยด:
วัตถุ BLOB เป็นวัตถุที่มีไฟล์คล้ายไฟล์ที่มีข้อมูลดิบแบบอ่านอย่างเดียว ข้อมูลในวัตถุ Blob ไม่จำเป็นต้องเป็นรูปแบบดั้งเดิมใน JavaScript อินเทอร์เฟซไฟล์ขึ้นอยู่กับ Blob สืบทอดฟังก์ชั่นของ BLOB และขยายเพื่อรองรับไฟล์ท้องถิ่นในคอมพิวเตอร์ของผู้ใช้
URL วัตถุที่เราต้องการได้รับจริง ๆ แล้วได้มาจากวัตถุ Blob เนื่องจากอินเทอร์เฟซไฟล์สืบทอด blob นี่คือการแปลงวัตถุหยดเป็น URL:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var f = document.getElementById ('อัปโหลด') ไฟล์ [0];
var src = window.url.createObjecturl (f);
document.getElementById ('ดูตัวอย่าง'). src = src;
</script>
ความเข้ากันได้:
วิธีการข้างต้นเหมาะสำหรับเบราว์เซอร์ Chrome
หากเป็นเบราว์เซอร์ IE คุณสามารถใช้ค่าอินพุตโดยตรงแทน SRC
เมื่อดูข้อมูลออนไลน์คุณสามารถใช้วิธี getAsDataUrl () โดยตรงของวัตถุไฟล์เพื่อรับ URL ตอนนี้วิธีนี้ถูกยกเลิก ในทำนองเดียวกันมีวิธีการ getastext () และ getasbinary () ลองมาดูตัวอย่างเช่นกัน
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getfullpath (obj) {// รับเส้นทางเต็มไปยังภาพ
ถ้า (obj) {
//เช่น
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select ();
ส่งคืน document.selection.createrange (). ข้อความ;
-
// firefox
อื่นถ้า (window.navigator.useragent.indexof ("firefox")> = 1) {
ถ้า (obj.files) {
ส่งคืน obj.files.item (0) .getasdataurl ();
-
กลับ obj.value;
-
กลับ obj.value;
-
-
รหัสนี้เป็นพา ธ ที่สมบูรณ์เพื่อรับภาพไคลเอนต์
เราจะ จำกัด ขนาดและรูปแบบของมัน
การคัดลอกรหัสมีดังนี้:
$ ("#loadfile") เปลี่ยน (function () {
var strsrc = $ ("#loadfile"). val ();
img = ภาพใหม่ ();
img.src = getfullpath (strsrc);
// ตรวจสอบว่ารูปแบบไฟล์อัปโหลดถูกต้อง
var pos = strsrc.lastindexof (".");
var lastName = strsrc.substring (pos, strsrc.length)
if (lastName.toLowerCase ()! = ".jpg") {
การแจ้งเตือน ("ประเภทไฟล์ที่คุณอัปโหลดคือ" + นามสกุล + "ภาพจะต้องเป็นประเภท JPG");
กลับเท็จ;
-
// ตรวจสอบอัตราส่วนมุมมองของไฟล์ที่อัปโหลด
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
การแจ้งเตือน ("สัดส่วนของภาพที่คุณอัปโหลดอยู่นอกเหนือระยะและอัตราส่วนภาพควรอยู่ระหว่าง 1.25-1.5");
กลับ;
-
// ตรวจสอบว่าไฟล์ที่อัปโหลดมีขนาดใหญ่หรือไม่
if (img.filesize / 1024> 150) {
การแจ้งเตือน ("ขนาดไฟล์ที่คุณอัปโหลดเกินขีด จำกัด 150K!");
กลับเท็จ;
-
ในหมู่พวกเขา LoadFile คือ ID ของไฟล์อินพุต HTML หลังจากเหตุการณ์การเปลี่ยนแปลงนั่นคือหลังจากเลือกไฟล์ที่จะอัปโหลดให้แสดงภาพในกล่องรูปภาพหรือไม่ เพิ่มรหัสต่อไปนี้ในตอนท้ายของรหัสด้านบน
การคัดลอกรหัสมีดังนี้:
$ ("#stemic"). attr ("src", getfullpath (นี้));
เนื่องจากใช้ jQuery ให้แชร์ตัวอย่างรหัสที่เขียนใน jQuery:
การคัดลอกรหัสมีดังนี้:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<script type = "text/javascript" src = "jQuery.js"> </script>
<ภาษาสคริปต์ = "JavaScript">
$ (function () {
var ei = $ ("#ใหญ่");
ei.hide ();
$ ("#img1"). Mousemove (ฟังก์ชั่น (e) {
ei.css ({top: e.pagey, ซ้าย: e.pagex}). html ('<img style = "เส้นขอบ: 1px สีเทาแข็ง;" src = "' this.src + '" />'). แสดง ();
}). mouseout (function () {
ei.hide ("ช้า");
-
$ ("#f1"). เปลี่ยน (ฟังก์ชั่น () {
$ ("#img1") .attr ("src", "ไฟล์: ///"+$ ("#f1") .val ());
-
-
</script>
<style type = "text/css">
#large {ตำแหน่ง: Absolute; Display: None; Z-Index: 999;}
</style>
</head>
<body>
<form name = "form1" id = "form1">
<div id = "demo">
<อินพุต id = "f1" name = "f1" type = "ไฟล์" />>
<img id = "img1">
</div>
<div id = "ใหญ่"> </div>
</form>
</body>
</html>