Công cụ upload ảnh và tự động lấy link ảnh

30.7.19 | 1 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    Bài viết này mình giới thiệu về công cụ upload ảnh và lấy link để chia sẻ qua trang imgur.com

    Demo

    Hướng dẫn thêm công cụ upload ảnh

    Chèn đoạn code bên dưới vào nơi bạn muốn hiển thị

    <div class="dropzone">
            <div class="infoimg"></div>
    </div>
    

    Sử dụng 2 file JS bên dưới

    <script type="text/javascript" src="https://firebasestorage.googleapis.com/v0/b/huydc-090288.appspot.com/o/Images%20Upload%2Fimgur.js?alt=media&token=0fa4ea9f-1988-4a4c-9184-76682c1d21eb"></script>
    <script type="text/javascript" src="https://firebasestorage.googleapis.com/v0/b/huydc-090288.appspot.com/o/Images%20Upload%2Fupload.js?alt=media&token=474a35a1-d43e-4026-a899-c3cd9da9f9a3"></script>
    
    Bạn có thể dowload 2 file JS trên về để chỉnh sửa theo ý mình qua 2 link tương ứng imgur.jsupload.js
    Trong file upload.js sẽ có nội dung như sau
    var feedback = function(res) {
        if (res.success === true) {
            var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
            document.querySelector('.status').classList.add('bg-success');
            document.querySelector('.status').innerHTML =
                '<div class="linkimg"><input class="image-url" id="copylinkimg" onclick="this.select()" value=\"' + get_link + '\"/></div>' + '<div class="showimg"><img class="img" alt="Imgur-Upload" src=\"' + get_link + '\"/></div>';
        }
    };
    
    new Imgur({
        clientid: '72100ba3c6aded1',
        callback: feedback
    });
    Bạn lưu ý 72100ba3c6aded1 là Client ID để tool có thể hoạt động, để chủ động hơn bạn tạo account tại imgur.com sau đó vào link sau để tạo và lấy Client ID riêng tránh việc mình xóa hoặc thay đổi Client ID này tool của bạn sẽ không hoạt động nữa

    Thêm giao diện cho công cụ trên bằng đoạn css dưới

    body.loading .loading-modal{display:block}
    .dropzone{border:2px dashed #999;border-radius:10px;position:relative;margin:0 auto;clear:both;}
    .infoimg{margin:0 auto;margin-top:20px;margin-bottom:20px}
    .dropzone p{margin:0;text-align:center;width:100%;font-weight:bold;color:#999}
    .input{height:100%;left:0;outline:0;opacity:0;position:absolute;top:0;width:100%;cursor:-webkit-zoom-in}
    .status{border-radius:5px;text-align:center;margin-left:auto;margin-right:auto}
    .image-url{width:calc(100% - 10px);padding:5px;border:1px solid #999;border-radius:5px;color:#999}
    .linkimg{margin:20px 0}
    .dropzone.dropzone-dragging{border-color:#000}
    .loading-modal{background-color:rgba(255,255,255,.8);display:none;position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%}
    .loading-table{margin-left:auto;margin-right:auto;margin-top:15%;margin-bottom:15%}
    
    Bạn đang xem bài viết "Công cụ upload ảnh và tự động lấy link ảnh" tại chuyên mục: Pinned , Tools

      1

      nhận xét
      Mới nhất ⇅

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link