TRYM.CF
Thông Báo
Bm_VQT Cách đây 8 năm trước |
Code up ảnh lên imgur cho xtgem này chỉ dùng js và html thôi
nói sơ về code up ảnh lên imgur cho xtgem này thì có 2 lựa chọn là up bằng file và url.tiện lợi
Demo:http://trym.mobie.in/tien-ich/imgur.php
Các bạn không sợ die thì dùng chung cliendid trên imgur với http://trym.mobie.in ,cho chắc thì vào imgur mà tạo 1 app riêng mà lấy cliendid mà dùng nhé. css và js các bạn thích thì tạo file js riêng rồi chèn vào cũng dc không sao
File js Click
nói sơ về code up ảnh lên imgur cho xtgem này thì có 2 lựa chọn là up bằng file và url.tiện lợi
Demo:http://trym.mobie.in/tien-ich/imgur.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<!-- zzImgUr plugin --> <script src="/js/10785.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{border:1px solid #333;background:#FFF;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:urlhttp: no-repeat center center;width:16px;height:16px;float:left;margin:7px}
.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:30px;height:30px;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;height0px;display:none;padding:0 10px 0 0}
.imgur_Zzbv-button .imgur_Zzbv-reset{background-color:#01686D}
.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:30px;line-height:30px;overflow:hidden;background:#333;color:#FFF}
.imgur_Zzbv-preview{overflow-y:auto;overflow-x:hidden}
.imgur_Zzbv-li{background:#f2f2f2;list-style-type:none;position:relative;height:68px;border-top:1px solid #DDD;overflow:hidden}
.imgur_Zzbv-li:first-child{border-top:0 none}
.imgur_Zzbv-li:nth-child(2n){background:#E7E6E6}
.imgur_Zzbv-li:hover{background:#007CEE;color:#FFF}
.imgur_Zzbv-li.imgur_Zzbv-success{background:#FFFFA1}
.imgur_Zzbv-image{width:100px;overflow:hidden;position:absolute;height:100%}
.imgur_Zzbv-image img{max-width:100%;max-height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}
.imgur_Zzbv-info{position:absolute;left:100px;top:0;right:0;height:100%}
.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:300;font-size:12px}
.imgur_Zzbv input.imgur_Zzbv-input{width:calc16!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:5px;top:7px;display:none}
.imgur_Zzbv-add{cursor:pointer;position:absolute;width:100px;height:30px;overflow:hidden;background:orange;left:30px;top:0;z-index:10}
.imgur_Zzbv-upload-URL.imgur_Zzbv-add{background:#C100E6}
.imgur_Zzbv-textSelect{font-size:12px;position:absolute;width:100%;left:30px;height:30px;line-height:30px}
.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:90px;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:#666}
.imgur_Zzbv-devs-icon{position:absolute;right:0;top:0;line-height:16px}
.imgur_Zzbv-tip{height:24px;font-size:13px;font-style:italic;line-height:26px}
.imgur_Zzbv-tip img{vertical-align:middle;float:none;margin:-4px 0 0}
.imgur_Zzbv-wrap-progress{background:#FFF;heightpx;border:0;position:absolute;bottom:0;left:-100px;right:0}
.imgur_Zzbv-progress{height:3px;background:red;width:1px}
.imgur_Zzbv-errorURL{color:red}
.imgur_Zzbv input.imgur_Zzbv-imageURL{width:calc89!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:30px}
.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: "71ae7b89253621e",
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>
<div class="upload">
<div style="width: 100%;" class="imgur_Zzbv">
<div class="imgur_Zzbv-control">
<div class="imgur_Zzbv-mode">
<img style="width: 16px; height: 16px;" alt="Image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconImage" />
</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 style="width: 16px; height: 16px;" alt="Select" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconSelect" />
<div class="imgur_Zzbv-textSelect">
Chọn ảnh
</div>
<input multiple="multiple" class="imgur_Zzbv-choose" type="file" />
</div>
<div style="display: none;" class="imgur_Zzbv-upload-URL imgur_Zzbv-add">
<div class="imgur_Zzbv-iconSelect">
</div>
<div class="imgur_Zzbv-textSelect">
Thêm URL
</div>
</div>
<div style="display: none;" class="imgur_Zzbv-length">
<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 style="width: 16px; height: 16px;" alt="Reset" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconReset" />Làm mới
</div>
<div style="display: none;" class="imgur_Zzbv-upload">
<img style="width: 16px; height: 16px;" alt="Upload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="imgur_Zzbv-iconUpload" />Tải lên
</div>
</div>
</div>
<div class="imgur_Zzbv-preview">
<div class="imgur_Zzbv-list">
</div>
</div>
</div>
</div>
Các bạn không sợ die thì dùng chung cliendid trên imgur với http://trym.mobie.in ,cho chắc thì vào imgur mà tạo 1 app riêng mà lấy cliendid mà dùng nhé. css và js các bạn thích thì tạo file js riêng rồi chèn vào cũng dc không sao
File js Click
Còn “nhiều” Lắm!
Bạn đã xem chưa?
Tao.Rất.Yêu.Mày