Demo
Chức năng code up ảnh bằng imgur
Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng.
Sử dụng dễ dàng 7 định dạng BBcode mặc định, hoặc có thể tùy biến dữ liệu với 7 định dạng link.
Ảnh sau khi tải lên có thể cập nhật trực tiếp vào khung soạn thảo.
Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
Dễ dàng chuyển đổi 2 phương pháp tải ảnh thông dụng từ máy tính và từ liên kết.
Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh.
Tự chuyển về giao diện mini khi chiều rộng hẹp hơn 220px.
Kiểm soát định dạng, các ảnh trùng lặp và giới hạn 10 ảnh tối đa mỗi lượt, giúp tiết kiệm băng thông (vì mỗi app đăng ký trên ImgUr bị giới hạn).
Hướng dẫn tạo trang up ảnh lên imgur
Bước 1: Đăng ký Client ID tại https://api.imgur.com/oauth2/addclient
Application name: Đặt tên app tùy ý
Authorization type: Chọn dòng thứ 2 hoặc 3
Authorization callback URL: /
Application website: Tên miền của diễn đàn bạn
Email: Điền email của bạn
Description: Ghi chú cho app
Bước 2 Tiếp thẹo tạo 1 Html :
<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: 90%;">
<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: Thay CLIEND-ID ở bước 1 tạo tài khoản
Lưu lại và tận hưởng
Upload images from ImgUr
Bài viết liên quan:
https://severphim.blogspot.com/2018/05/tao-trang-up-anh-len-imgurcom-cho.html
Nhận Xét Blogger
Không có nhận xét nào. bạn hãy là người đầu tiên.