搜了很久，发现国内好像没有多少利用Imgur的API做图床的——至少我翻了度娘前几页都木有。于是果断去找谷歌娘~
找到一个老外大神做的基于HTML5和Imgur的API做的一个图床页面.我翻译了一下,并稍微完善了一下代码，做了个美化，顺便做了个demo。
各位看官最好先自己去申请个Imgur的API → http://api.imgur.com/
1、最简化代码（包含拖动上传、选择本地图片上传功能）
这是Demo
<!DOCTYPE html>
<meta charset="gbk">
<title>Imgur Upload Simple Demo</title>
<!--拖动提示和选择按钮-->
<div>拖动图像至此<button onclick="document.querySelector('input').click()">本地上传</button></div>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">
<script>
window.ondragover = function(e) {e.preventDefault()}
window.ondrop = function(e) {e.preventDefault(); upload(e.dataTransfer.files[0]); }
function upload(file) {
/* 判断是否为图像文件*/
if (!file || !file.type.match(/image.*/)) return;
document.body.className = "uploading";
var fd = new FormData();
fd.append("image", file); // 提交文件
fd.append("key", "6528448c258cff474ca9701c5bab6927"); //请修改为自己的API KEY
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json");
xhr.onload = function() {
document.querySelector("#link").href = JSON.parse(xhr.responseText).upload.links.imgur_page;
document.body.className = "uploaded";
}
xhr.send(fd);
}
</script>
<style>
body {text-align: center; padding-top: 200px;}
div { border: 10px solid black; text-align: center; line-height: 100px; width: 250px; margin: auto; font-size: 40px; display: inline-block;}
#link, p , div {display: none}
div {display: inline-block;}
.uploading div {display: none}
.uploaded div {display: none}
.uploading p {display: inline}
.uploaded #link {display: inline}
em {position: absolute; bottom: 0; right: 0}
</style>
<p>上传中...</p>
<a id="link" target="_blank">我是你上传的图像哦</a>
2、包含拖动上传、多文件同时上传、文件夹上传、ZIP压缩包上传和图像预览功能的代码:
这是demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Imgur Upload Complex</title>
</head>
<style>
body {text-align: center;background:url("https://sell.moe/demos/imgur/bg.jpg") repeat fixed center 0 transparent;}
#drag { border: 10px solid black; text-align: center; padding:20px; width: 500px; margin-top:10px; font-size: 40px; display: inline-block;background-color:#FFFFFF;}
#einput {width:400px;}
#output {margin:20px;}
#filesinput, #directoryinput, #zipinput {
visibility: collapse;
width: 0px;
}
#output img{
border: 5px solid #333;
margin-right: 2px;
}
</style>
<script language="javascript" type="text/javascript" src="http://bbs.comicat.us/static/js/upload.js"></script>
<body>
<center><img src="https://sell.moe/demos/imgur/logo.png" /></center>
<div id="drag">拖动图片至此<br />
<button id="fbutton">选择图片</button>
<button id="dbutton">选择目录</button>
<button id="zbutton">选择ZIP文件</button>
<input id="einput" type="input" placeholder="网络图片地址,如:http://bbs.comicat.us/logo.gif"><button id="external">提交</button>
<div style="font-size:9px"><font color="#FF0000">Tips:上传速度可能较慢,请耐心等待图片出现在下方!↓↓↓↓不要以为没有反应哦</font></div>
</div>
<input type="file" id="filesinput" multiple>
<input type="file" id="directoryinput" multiple webkitdirectory>
<input type="file" accept="application/zip" id="zipinput">
<div id="output"></div>
<div id="error"></div>
<script>
var files = document.getElementById("filesinput");
var directory = document.getElementById("directoryinput");
var zipinput = document.getElementById("zipinput");
var external = document.getElementById("external");
var fbutton = document.getElementById("fbutton");
var dbutton = document.getElementById("dbutton");
var zbutton = document.getElementById("zbutton");
//普通图像文件上传
files.addEventListener("change", function (e) {
var files = e.target.files;
for(i=0; i<files.length; i++) {
var file = files[i];
if(file.type.match(/image.*/)){
upload(file);
}
}
}, false);
//文件夹上传
directory.addEventListener("change", function (e) {
var files = e.target.files;
for (var i=0; i<files.length; i++) {
var file = files[i];
if(file.type.match(/image.*/)){
upload(file);
}
}
}, false);
//zip文件上传
zipinput.addEventListener('change', function() {
unzip(zipinput.files[0]);
}, false);
external.addEventListener("click", function (e) {
var einput = document.getElementById("einput");
var file = einput.value;
upload(file);
}, false);
fbutton.addEventListener("click", function() {
document.getElementById('filesinput').click();
}, false);
dbutton.addEventListener("click", function() {
document.getElementById('directoryinput').click()
}, false);
zbutton.addEventListener("click", function() {
document.getElementById('zipinput').click()
}, false);
</script>
</body>
</html>
恩…超好用的!!!!(・∀・)
感謝翻譯
最近抓img坐在套版上對方的server都有時候404
藉這個抓會比較穩
我还以为已经失效了。。
現在好像不能用了….求更新