Chia Sẻ Code Trang Up Ảnh Nhanh Lên Imgur Bằng HTML5 Cho Blog
Công cụ upload ảnh và tự động lấy link ảnh cho blogger
1. Up Ảnh Nhanh Lên Imgur Bằng HTML5
Xin chào các bạn đã đến với bài viết tiếp theo của iTeam OS. Như hiện nay được biết của mình thì việc các bạn sử dụng Link ảnh khá nhiều nên việc up ảnh và lấy link ảnh nhanh là khá cần thiết với một số bạn, nên hôm nay mình sẽ hướng dẫn các bạn tạo một trang Up ảnh lên Imgur và lấy link cực nhanh
|
| Công cụ upload ảnh và tự động lấy link ảnh cho blogger |
Các bước thực hiện
Bước 1: Tạo một trang mới cho blogspot, và chuyển sang phần viết HTML
Bước 2: Chèn đoạn code sau vào:
<script src="http://code.jquery.com/jquery-1.10.1.js" type="text/javascript"></script>
<!-- zzImgUr plugin đa up lại js dropbox ko cần up lại vì ko xóa đâu --> <script src="https://dl.dropboxusercontent.com/s/ybbxn699ravj52b/16855.js" type="text/javascript"></script><style>
/*
* jQuery plugin zzImgUr ver 1.6 by zzbaivong
* http://devs.forumvi.com/
*/
.imgur_Zzbv,.imgur_Zzbv *{box-sizing:content-box;-moz-boxsizing:content-box;-webkit-box-sizing:content-box;margin:0;padding:0}
.imgur_Zzbv input{-webkit-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial}
.imgur_Zzbv{height:auto}
.imgur_Zzbv-iconError,.imgur_Zzbv-iconDevs,.imgur_Zzbv-delete,.imgur_Zzbv-remove,.imgur_Zzbv-iconSelect,.imgur_Zzbv-button div img,.imgur_Zzbv-iconComplete,.imgur_Zzbv-iconImage{display:inline-block;background:url(https://i.imgur.com/e9GpBzF.png) no-repeat center center;width:16px;height:16px;float:left;margin:12px}
.imgur_Zzbv-iconDevs{background-position:0 0}
.imgur_Zzbv-iconComplete{background-position:-32px -16px}
.imgur_Zzbv-status img{margin:0}
.imgur_Zzbv-iconError{background-position:0 -32px}
.imgur_Zzbv-iconSelect{background-position:0 -16px}
.imgur_Zzbv-iconUpload{background-position:-16px -16px}
.imgur_Zzbv-button div img.imgur_Zzbv-iconReset{background-position:-16px 0}
.imgur_Zzbv-iconImage{background-position:-16px -32px}
.imgur_Zzbv-iconImage.imgur_Zzbv-iconUrl{background-position:-32px -32px}
.imgur_Zzbv-mode{cursor:pointer;width:40px;height:40px;float:left;background-color:#FF475D}
.imgur_Zzbv-mode.imgur_Zzbv-zzURL{background-color:#0B704C}
.imgur_Zzbv-button div{cursor:pointer;background-color:#359BED;border:0;height:40px;display:none;padding:0 10px;margin-left:-59px}
.imgur_Zzbv-button .imgur_Zzbv-reset{background-color:#27ad61}
.imgur_Zzbv-delete,.imgur_Zzbv-remove{background-position:-32px 0;position:absolute;right:3px;top:3px;height:16px;width:16px;text-indent:-9999px;overflow:hidden;background-color:transparent;margin:0}
.imgur_Zzbv-control{position:relative;height:40px;line-height:40px;overflow:hidden;background:#3a5795;color:#FFF}
.imgur_Zzbv-preview{overflow-y:auto;overflow-x:hidden}
.imgur_Zzbv-li{background:#fff;list-style-type:none;position:relative;height:120px;border-top:1px solid #DDD;overflow:hidden;border:2px solid #bbb}
.imgur_Zzbv-li:first-child{border-top:0 none}
.imgur_Zzbv-li:nth-child(2n){background:#E7E6E6}
.imgur_Zzbv-li:hover{background:#fff;color:#333}
.imgur_Zzbv-li.imgur_Zzbv-success{background:#FFFFA1}
.imgur_Zzbv-image{width:100px;overflow:hidden;position:absolute;height:113px;margin:10px}
.imgur_Zzbv-image img{max-width:100%;max-height:100%;position:absolute;top:0;right:0;bottom:0;left:0}
.imgur_Zzbv-info{position:absolute;left:140px;top:10px;right:10px;height:110px}
.imgur_Zzbv-info > *{white-space:nowrap}
.imgur_Zzbv-dl{line-height:34px}
.imgur_Zzbv-dl > div{height:34px}
.imgur_Zzbv-dt{float:left;width:70px;font-weight:400;font-size:14px}
.imgur_Zzbv input.imgur_Zzbv-input{width:calc(100% - 84px)!important;height:16px!important;line-height:16px!important;margin:8px 0!important;padding:0!important}
.imgur_Zzbv-status{position:absolute;width:16px;height:16px;line-height:16px;left:10px;display:none}
.imgur_Zzbv-add{cursor:pointer;position:absolute;width:110px;height:40px;overflow:hidden;background:#27ad60;left:40px;top:0;z-index:10}
.imgur_Zzbv-upload-URL.imgur_Zzbv-add{background:#C100E6}
.imgur_Zzbv-textSelect{font-size:15px;position:absolute;width:100%;left:34px;height:40px;line-height:40px}
.imgur_Zzbv-choose{cursor:pointer;z-index:10;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;font-size:300px;height:1000px;right:0;top:0;position:absolute}
.imgur_Zzbv-length{position:absolute;width:50px;text-align:center;top:0;left:50%;margin-left:-25px;display:none}
.imgur_Zzbv-button{position:absolute;width:100px;right:0;top:0;white-space:nowrap;z-index:10}
.imgur_Zzbv-mode:hover,.imgur_Zzbv-button div:hover,.imgur_Zzbv-add:hover{background-color:#333}
.imgur_Zzbv-devs-icon{position:absolute;right:0;top:0;line-height:16px}
.imgur_Zzbv-tip{height:30px;font-size:15px;font-style:normal;line-height:30px;margin-bottom:20px}
.imgur_Zzbv-tip img{vertical-align:middle;float:none;margin:-4px 0 0}
.imgur_Zzbv-wrap-progress{background:#f8f8f8;height:3px;border:0;position:absolute;bottom:0;left:-141px;right:-10px}
.imgur_Zzbv-progress{height:3px;background:red;width:1px}
.imgur_Zzbv-errorURL{color:red}
.imgur_Zzbv input.imgur_Zzbv-imageURL{width:calc(100% - 11px)!important;border:0 none!important;box-shadow:0 0 0 1px #DDD!important;height:16px!important;line-height:16px!important;margin:0 0 0 1px!important}
.imgur_Zzbv-mini .imgur_Zzbv-button,.imgur_Zzbv-mini .imgur_Zzbv-add{width:40px}
.imgur_Zzbv-mini .imgur_Zzbv-info{left:10px}
.imgur_Zzbv-mini .imgur_Zzbv-wrap-progress{left:-10px}
.imgur_Zzbv-upload-URL,.imgur_Zzbv-mini .imgur_Zzbv-image{display:none}
</style> <script type="text/javascript">//<![CDATA[
$(function(){
$(".upload").zzImgUr({
cliendID: "74f5c858f447bb9",
mode: "file",
format: "o,",
css: {
width: "100%"
},
max: 10,
loading: "http://i.imgur.com/m3NXDa6.gif",
lang: {
noID: "Ứng dụng chưa đăng ký",
addImage: "Chọn ảnh",
addURL: "Thêm URL",
reset: "Làm mới",
upload: "Tải lên",
choose: "Đã chọn",
waitConnect: "Đang kết nối...",
waitUpload: "Đang tải lên...",
noteURL: "Nhập URL ảnh vào đây:",
errContact: '<a href="http://devs.forumvi.com/t131-jq-plugin-jquery-plugin-zzimgur#831" rel="nofollow" target="_blank">Nhấn vào đây</a> để báo lỗi.',
errURL: "URL không truy cập được.",
errSize: "URL lỗi hoặc kích thước quá nhỏ.",
errRepeat: "URL không hợp lệ hoặc đã được sử dụng."
},
success: function (firstVal, arrVal) {
console.log(firstVal);
console.log(arrVal);
},
input: function (arrInput) {
console.log(arrInput);
arrInput.click(function () {
this.select();
console.log(this);
});
},
remove: function (firstVal, arrVal) {
console.log(firstVal);
console.log(arrVal);
}
});
});//]]>
</script>
<br />
<div class="upload">
<div class="imgur_Zzbv" style="width: 100%;">
<div class="imgur_Zzbv-control">
<div class="imgur_Zzbv-mode">
<img alt="Image" class="imgur_Zzbv-iconImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />
</div>
<div class="imgur_Zzbv-status">
<img alt="loading..." src="http://i.imgur.com/m3NXDa6.gif" />
</div>
<div class="imgur_Zzbv-upload-computer imgur_Zzbv-add">
<img alt="Select" class="imgur_Zzbv-iconSelect" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />
<br />
<div class="imgur_Zzbv-textSelect">
Chọn ảnh
</div>
<input class="imgur_Zzbv-choose" multiple="multiple" type="file" />
</div>
<div class="imgur_Zzbv-upload-URL imgur_Zzbv-add" style="display: none;">
<div class="imgur_Zzbv-iconSelect">
</div>
<div class="imgur_Zzbv-textSelect">
Thêm URL
</div>
</div>
<div class="imgur_Zzbv-length" style="display: none;">
<span class="imgur_Zzbv-complete">0</span> / <span class="imgur_Zzbv-selected">0</span>
</div>
<div class="imgur_Zzbv-button">
<div class="imgur_Zzbv-reset">
<img alt="Reset" class="imgur_Zzbv-iconReset" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />Làm mới
</div>
<div class="imgur_Zzbv-upload" style="display: none;">
<img alt="Upload" class="imgur_Zzbv-iconUpload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="height: 16px; width: 16px;" />Tải lên
</div>
</div>
</div>
<div class="imgur_Zzbv-preview">
<div class="imgur_Zzbv-list">
</div>
</div>
</div>
</div>
Bước 3: Lưu lại và tận hưởng
2. Thêm cách kéo thẻ image
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>
<script>/*<![CDATA[*/ /* Imgur Upload Script */
(function (root, factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.Imgur = factory();
}
}(this, function () {
"use strict";
var Imgur = function (options) {
if (!this || !(this instanceof Imgur)) {
return new Imgur(options);
}
if (!options) {
options = {};
}
if (!options.clientid) {
throw 'Provide a valid Client Id here: https://api.imgur.com/';
}
this.clientid = options.clientid;
this.endpoint = 'https://api.imgur.com/3/image';
this.callback = options.callback || undefined;
this.dropzone = document.querySelectorAll('.dropzone');
this.infoimg = document.querySelectorAll('.infoimg');
this.run();
};
Imgur.prototype = {
createEls: function (name, props, text) {
var el = document.createElement(name), p;
for (p in props) {
if (props.hasOwnProperty(p)) {
el[p] = props[p];
}
}
if (text) {
el.appendChild(document.createTextNode(text));
}
return el;
},
insertAfter: function (referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
},
post: function (path, data, callback) {
var xhttp = new XMLHttpRequest();
xhttp.open('POST', path, true);
xhttp.setRequestHeader('Authorization', 'Client-ID ' + this.clientid);
xhttp.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 300) {
var response = '';
try {
response = JSON.parse(this.responseText);
} catch (err) {
response = this.responseText;
}
callback.call(window, response);
} else {
throw new Error(this.status + " - " + this.statusText);
}
}
};
xhttp.send(data);
xhttp = null;
},
createDragZone: function () {
var p1, p2, input;
p1 = this.createEls('p', {}, 'Kéo file ảnh vào đây');
p2 = this.createEls('p', {}, 'Hoặc click để chọn ảnh');
input = this.createEls('input', {type: 'file', className: 'input', accept: 'image/*'});
Array.prototype.forEach.call(this.infoimg, function (zone) {
zone.appendChild(p1);
zone.appendChild(p2);
}.bind(this));
Array.prototype.forEach.call(this.dropzone, function (zone) {
zone.appendChild(input);
this.status(zone);
this.upload(zone);
}.bind(this));
},
loading: function () {
var div, table, img;
div = this.createEls('div', {className: 'loading-modal'});
table = this.createEls('table', {className: 'loading-table'});
img = this.createEls('img', {className: 'loading-image', src: 'https://cdn.giahuy.net/image/loading.svg'});
div.appendChild(table);
table.appendChild(img);
document.body.appendChild(div);
},
status: function (el) {
var div = this.createEls('div', {className: 'status'});
this.insertAfter(el, div);
},
matchFiles: function (file, zone) {
var status = zone.nextSibling;
if (file.type.match(/image/) && file.type !== 'image/svg+xml') {
document.body.classList.add('loading');
status.classList.remove('bg-success', 'bg-danger');
status.innerHTML = '';
var fd = new FormData();
fd.append('image', file);
this.post(this.endpoint, fd, function (data) {
document.body.classList.remove('loading');
typeof this.callback === 'function' && this.callback.call(this, data);
}.bind(this));
} else {
status.classList.remove('bg-success');
status.classList.add('bg-danger');
status.innerHTML = 'Invalid archive';
}
},
upload: function (zone) {
var events = ['dragenter', 'dragleave', 'dragover', 'drop'],
file, target, i, len;
zone.addEventListener('change', function (e) {
if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
target = e.target.files;
for (i = 0, len = target.length; i < len; i += 1) {
file = target[i];
this.matchFiles(file, zone);
}
}
}.bind(this), false);
events.map(function (event) {
zone.addEventListener(event, function (e) {
if (e.target && e.target.nodeName === 'INPUT' && e.target.type === 'file') {
if (event === 'dragleave' || event === 'drop') {
e.target.parentNode.classList.remove('dropzone-dragging');
} else {
e.target.parentNode.classList.add('dropzone-dragging');
}
}
}, false);
});
},
run: function () {
var loadingModal = document.querySelector('.loading-modal');
if (!loadingModal) {
this.loading();
}
this.createDragZone();
}
};
return Imgur;
})); /*]]>*/</script>
<script>/*<![CDATA[*/ 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: '67391c0840db64e',
callback: feedback
}); /*]]>*/</script>Lưu ý: 67391c0840db64e 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.
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%}
Lời kết
Trên đây là hướng dẫn công cụ upload ảnh và tự động lấy link ảnh cho blogger. Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!.
Truy cập Bypass Google Account APK để tải file APK nhé
Tham gia cuộc trò chuyện