ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำการใช้งานเฉพาะของ HTML5 การอ่านไฟล์ท้องถิ่น สไตล์โครงสร้าง HTML สไตล์ CSS และรหัส JS มีดังนี้ เพื่อนที่ต้องการมันสามารถดูได้
สไตล์โครงสร้าง HTML มีดังนี้:<div>
<putton> เพิ่มรูปภาพ </putton>
<form>
<input type = "file" multiple accept = "image/*">
</form>
</div>
<img src = "">
จากมุมมองสไตล์ไม่ควรแสดงกล่องอินพุตขององค์ประกอบอินพุต ในเวลานี้อินพุตจะต้องตั้งค่าเป็นสไตล์โปร่งใสแล้วเขียนทับเหนือองค์ประกอบปุ่ม จากนั้นสามารถคลิกที่ปุ่มเพื่ออัปโหลดภาพ ตั้งค่าที่ยอมรับเป็น Image/*อนุญาตให้อัปโหลดไฟล์รูปภาพเท่านั้น
สไตล์ CSS มีดังนี้
. Addpic {
ตำแหน่ง: ญาติ;
ขอบซ้าย: 100px;
ความกว้าง: 95px;
ความสูง: 30px;
-
.Addlogo {
พื้นหลัง: ไม่มีการเลื่อนซ้ำ 0 0 rgba (0, 0, 0, 0);
เคอร์เซอร์: ตัวชี้;
ขนาดตัวอักษร: 30px;
ความทึบ: 0;
ตำแหน่ง: สัมบูรณ์;
ขวา: 0;
ด้านบน: 0;
z-index: 10;
-
รหัส JS
ฟังก์ชั่น readfiles (evt) {
var files = evt.target.files;
if (! ไฟล์) {
console.log ("ไฟล์ถูก invaild");
กลับ;
-
สำหรับ (var i = 0, ไฟล์; file = files [i]; i ++) {
var imgele = ภาพใหม่ ();
var thesrc = window.url.createObjecturl (ไฟล์);
imgele.src = thesrc;
imgele.onload = function () {
$ ("#showlogo"). attr ("src", this.src);
-
-
-
$ (เอกสาร) .ready (function () {
$ ("#logoimg"). การเปลี่ยนแปลง (ฟังก์ชั่น (e) {
readfiles (e)
-
-