programming javascript

Cách lấy url hình ảnh từ loại đầu vào = tệp trong javascript

Thêm bản xem trước cho hình ảnh đã chọn là điều mà đôi khi chúng tôi phải thực hiện trong ứng dụng web JavaScript của mình

Trong bài viết này, chúng ta sẽ xem cách thêm hình ảnh xem trước để hiển thị hình ảnh mà người dùng đã chọn

Thêm Bản xem trước hình ảnh cho Đầu vào tệp

Để thêm bản xem trước hình ảnh cho đầu vào tệp, trước tiên, chúng tôi thêm đầu vào tệp và phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

2 để hiển thị bản xem trước hình ảnh

Chúng tôi đặt

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

3 thành

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

4 để biến

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

5 thành đầu vào tệp

Tiếp theo, chúng ta cần thêm một số mã JavaScript để đọc tệp thành chuỗi base64

Sau đó, chúng ta có thể đặt thuộc tính

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

6 của phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

2 thành chuỗi base64

Để làm điều này, chúng tôi viết

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Chúng tôi nhận được các phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

5 và

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

2 với

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Sau đó, chúng tôi gọi

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

2 trên

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

3 với một cuộc gọi lại để chúng tôi theo dõi lựa chọn tệp

Chúng tôi chuyển vào

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

4 để xem sự kiện thay đổi, được kích hoạt khi chúng tôi chọn một tệp

Trong cuộc gọi lại, chúng tôi kiểm tra xem có

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

5 không

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

6 có các tệp được chọn

Chúng tôi nhận được tệp đầu tiên với chỉ số 0

Sau đó, chúng tôi tạo phiên bản

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

7 để đọc tệp đã chọn

Và chúng tôi đặt phương thức

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

8 chạy khi tệp được chọn

Ta lấy

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

9 để lấy kết quả file

Tệp phải được đọc thành chuỗi base64, đây là giá trị hợp lệ cho thuộc tính

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

6 của phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Do đó, chúng ta có thể đặt trực tiếp thuộc tính

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

12 thành

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Và để kích hoạt việc đọc tệp, chúng ta gọi phương thức

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

14 với

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

15 , phương thức có tệp được chọn đầu tiên

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Chúng ta cũng có thể sử dụng phương thức

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

17 để tạo chuỗi base64 từ tệp hình ảnh đã chọn

Chẳng hạn, chúng ta có thể viết

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

và giữ nguyên mã HTML

Chúng tôi gọi

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

18 với

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

15 để tạo chuỗi base64 từ đối tượng tệp được lưu trữ trong

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Sau đó, chúng tôi đặt phương thức

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

8 của đối tượng phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

2, phương thức này được chạy khi thuộc tính

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

6 của phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

2 thay đổi

Chúng tôi gọi

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

25 ở đó để giải phóng đối tượng hình ảnh khỏi bộ nhớ

Sự kết luận

Chúng tôi thêm bản xem trước hình ảnh vào ứng dụng JavaScript của mình bằng cách đọc tệp hình ảnh đã chọn thành chuỗi base64 và đặt nó làm giá trị của thuộc tính

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

6 của phần tử

const imgInput = document.querySelector['input']
const imgEl = document.querySelector['img']imgInput.addEventListener['change', [] => {
  if [imgInput.files && imgInput.files[0]] {
    const reader = new FileReader[];
    reader.onload = [e] => {
      imgEl.src = e.target.result;
    }
    reader.readAsDataURL[imgInput.files[0]];
  }
}]

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề