Có gì mới?

Diễn Đàn Cú Đêm

  • Bạn có những câu chuyện thầm kín nhưng không biết kể với ai, bạn buồn phiền vì chuyện tình cảm, gia đình, cuộc sống. Hãy chia sẻ tâm sự của bạn với cộng đồng cú đêm nhé. NGHIÊM CẤM SPAM QUẢNG CÁO.

Share Code Upload ảnh bằng javascript dùng Imgur API

  • Thread starter Phit
  • Ngày gửi
  • Replies 1
  • Views 252

Phit

Cú Đêm Member
Tham gia
17/8/21
Bài viết
260
Lượt thích
100
Điểm
43
Nơi ở
Sao Hoả
Chào các bạn. Hôm nay mình sẽ hướng dẫn cho mọi người tạo nút upload ảnh lên Imgur bằng Javascript. Với code này bạn có thể tạo được công cụ upload ảnh lưu trữ trên Imgur để dùng mà không cần lưu trữ trực tiếp trên server giúp tiết kiệm dung lượng ổ đĩa.

Demo: https://sharescript.net/demo/imgur-upload-api/
6F193345-BB64-4D8E-BECD-C495D400F3B3.png

Hoặc bạn có thể xem nút upload ảnh ở chatbox của Cudem.pro


Bước 1: Lấy API key imgur​

Đầu tiên ae tạo cho mình một tài khoản imgur ở đây: Tạo tài khoản imgur
32AB5454-E02F-430E-AD81-CE04E28A9CAA.png
Sau khi tạo tài khoản imgur
Tiếp đến ae vào đây để tạo API key: Add Client – Imgur
02501552-AA25-49A7-B020-BD2BAAF2A839.png

Điền thông tin vào như này, có thể chọn callback để add callback url
Sau khi tạo xong API thì ae tiếp tục truy cập vào đây để lấy client ID: Preferences – Imgur
DB3F8A0A-8BB7-4D82-94C4-AE218E777F9B.png


Client ID của mình sau khi tạo là 58f2ebf29687a0b
Vậy là ta đã có client ID – API key, tiếp theo là code nhé.

Bước 2: Code​

Code javascript (Có jquery):​

Mã:
$('document').ready(function () {
  $('input[type=file]').on('change', function () {
    var $files = $(this).get(0).files;

    if ($files.length) {
      if ($files[0].size > $(this).data('max-size') * 1024) {
        console.log('Vui lòng chọn file có dung lượng nhỏ hơn!');
        return false;
      }
     
      console.log('Đang upload hình ảnh lên imgur...');

      var apiUrl = 'https://api.imgur.com/3/image';
      var apiKey = '58f2ebf29687a0b'; // Thay bằng Client ID của ae

      var settings = {
        async: false,
        crossDomain: true,
        processData: false,
        contentType: false,
        type: 'POST',
        url: apiUrl,
        headers: {
          Authorization: 'Client-ID ' + apiKey,
          Accept: 'application/json',
        },
        mimeType: 'multipart/form-data',
      };

      var formData = new FormData();
      formData.append('image', $files[0]);
      settings.data = formData;

      $.ajax(settings).done(function (response) {
        console.log(response);
      });
    }
  });
});
Ae thay apiKey thành client ID nhé

Code html:​

Mã:
<script src="https://dl.dropboxusercontent.com/s/nvklmhq3kw4j9pq/jquerylasted.js?dl=0"></script>
<input type="file" accept="image/*">

Vậy là ổn rồi, kết hợp 2 file trên và tận hưởng:
Mã:
<script src="https://dl.dropboxusercontent.com/s/nvklmhq3kw4j9pq/jquerylasted.js?dl=0"></script>
<input type="file" accept="image/*">

<script>
$('document').ready(function () {
  $('input[type=file]').on('change', function () {
    var $files = $(this).get(0).files;

    if ($files.length) {
      if ($files[0].size > $(this).data('max-size') * 1024) {
        console.log('Vui lòng chọn file có dung lượng nhỏ hơn!');
        return false;
      }
     
      console.log('Đang upload hình ảnh lên imgur...');

      var apiUrl = 'https://api.imgur.com/3/image';
      var apiKey = '58f2ebf29687a0b';

      var settings = {
        async: false,
        crossDomain: true,
        processData: false,
        contentType: false,
        type: 'POST',
        url: apiUrl,
        headers: {
          Authorization: 'Client-ID ' + apiKey,
          Accept: 'application/json',
        },
        mimeType: 'multipart/form-data',
      };

      var formData = new FormData();
      formData.append('image', $files[0]);
      settings.data = formData;

      $.ajax(settings).done(function (response) {
        console.log(response);
      });
    }
  });
});
</script>

Ae có thể vào đây để test code: Tryit Editor v3.6 (w3schools.com), lúc test nhớ mở console để xem kết quả nhé, dưới đây là kết quả trả về dạng json:
168862D3-0F3B-4D56-9371-842B33E91ADA.png

Kết quả thành công

Nhưng có một điều là ae phải tự xử lý json trả về, nên mình xử lý luôn cho ae dùng nhóe

Ae thêm một cái output ở html:

Mã:
<div id="output"></div>
Và khi response được trả về thì thay vì console.log thì ae xài:

Mã:
var obj = JSON.parse(response);
document.getElementById("output").innerHTML = obj.data.link;

Nếu ae muốn làm giống y đúc demo thì tải code dưới đây nhé, chúc ae thành công!

Nội dung ẩn chỉ dành cho thành viên diễn đàn CuDem.Pro

nguồn: sharescript
 
Sửa lần cuối:

Thành viên trực tuyến

Không có thành viên trực tuyến.
shape1
shape2
shape3
shape4
shape7
shape8
Top