利用Imgur API的HTML5图片,ZIP和目录上传程序

mMTmj1

搜了很久,发现国内好像没有多少利用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>

 

这篇文章有3条评论

  1. 路過 2014/8/6 #1 回复TA

    恩…超好用的!!!!(・∀・)
    感謝翻譯
    最近抓img坐在套版上對方的server都有時候404
    藉這個抓會比較穩

  2. carry0987 2016/7/29 #2 回复TA

    現在好像不能用了….求更新

发表评论戳我取消回复

*

List
Love
00:00