フォトライフ一括アップロード

    @@ -3,8 +3,10 @@ * @description 64bit 版 Firefox だと Flash の一括アップロードが動かないので、その補完のつもりです。 * @include http://f.hatena.ne.jp/my/up * @license MIT License - * @javascript_url */ +/* + http://hakuhin.jp/js/upload.html +*/ (function(){ function removeNode(e) { e.parentNode.removeChild(e); @@ -16,10 +18,16 @@ var new_block = document.createElement("div"); new_block.style.width = "330px"; new_block.innerHTML = [ - '<div class="label" style="margin: 1em 0.5ex">複数のファイルを一括でアップロードします(10個まで)</div>', + '<div class="label" style="margin: 1em 0.5ex">複数のファイルを一括でアップロードします</div>', '<table class="edit config">', '<tbody><tr><th>画像・動画</th><td><input type="file" multiple></td></tr>', - '<tr><th>タイトル</th><td><input class="fototitle" size="32" type="text"></td></tr>', + '<tr><th>タイトル</th><td>', + '<input class="fototitle" size="32" type="text">', + '<br><label>', + '<input class="use_filename" type="checkbox">', + 'タイトルにファイル名を使う', + '</label>', + '</td></tr>', '</tbody></table>', ].join(""); @@ -28,39 +36,61 @@ removeNode(form.querySelector("div.upload-submit")); removeNode(file_block); - new_block.querySelector("input[type=\"file\"]").onchange = function() { - if (this.files.length > 10) { - alert("同時にアップロードできるのは10個までです!"); - return; - } + new_block.querySelector("input[type=\"checkbox\"]").onchange = function() { + this.parentNode.previousSibling.previousSibling.disabled = this.checked; + }; + new_block.querySelector("input[type=\"file\"]").onchange = function() { var form = this.form; - this.parentNode.removeChild(this); + var files = this.files; + removeNode(this); // 消しておかないと、二重にアップロードしちゃう + var title = new_block.querySelector("input[type=\"text\"]"); - var form_data = new FormData(form); - var i = 1; - Array.from(this.files).forEach(function(f) { - form_data.append("image" + i, f); - form_data.append("fototitle" + i, title.value); - i += 1; - }); - - var upload_url = form.action; - var xhr = new XMLHttpRequest(); - xhr.onload = function(e){ - var opts = form.querySelector("select[name=\"folder\"]"); - var folder = opts[opts.selectedIndex]; - var matches = /(.*\/)up/.exec(upload_url); - if (matches) { - document.location.href = matches[1] + "edit?folder=" + encodeURI(folder.value); + var use_filename_as_title = new_block.querySelector("input[type=\"checkbox\"]").checked; + + var upload_index = 0; + function upload() { + var form_data = new FormData(form); + + /* + fotolife の通常アップロードは 10個までしかファイルを受け付けない + */ + for (var i = 0 ; i < 10 && upload_index < files.length ; ++i, ++upload_index) { + var f = files[upload_index]; + var n = i + 1; + form_data.append("image" + n, f); + var name = use_filename_as_title ? f.name : title.value; + form_data.append("fototitle" + n, name); } - }; - xhr.open("POST", upload_url); - xhr.send(form_data); - - var label = new_block.querySelector("div.label"); - label.style.color = "red"; - label.innerHTML = "アップロードしています..."; + + var upload_url = form.action; + var xhr = new XMLHttpRequest(); + xhr.onload = function(e){ + if (upload_index < files.length) { + upload(); + } else { + /* + 編集ページに遷移する + 本来は、f.hatena.ne.jp/my/up が 302 で返ってきて、edit ページに移動する + */ + var opts = form.querySelector("select[name=\"folder\"]"); + var folder = opts[opts.selectedIndex]; + var matches = /(.*\/)up/.exec(upload_url); + if (matches) { + document.location.href = matches[1] + "edit?folder=" + encodeURI(folder.value); + } + } + }; + xhr.open("POST", upload_url, true); + xhr.send(form_data); + + var label = new_block.querySelector("div.label"); + label.style.color = "red"; + label.innerHTML = "アップロードしています... (" + (upload_index-9) + " - " + upload_index + " / " + files.length + ")"; + } + + upload(); + }; }());
  • /*
     * @title フォトライフ一括アップロード
     * @description 64bit 版 Firefox だと Flash の一括アップロードが動かないので、その補完のつもりです。
     * @include http://f.hatena.ne.jp/my/up
     * @license MIT License
     */
    /*
        http://hakuhin.jp/js/upload.html
    */
    (function(){
        function removeNode(e) {
            e.parentNode.removeChild(e);
        }
    
        var form = document.querySelector("form#upload");
        var file_block = form.querySelector("div#upload-form");
    
        var new_block = document.createElement("div");
        new_block.style.width = "330px";
        new_block.innerHTML = [
            '<div class="label" style="margin: 1em 0.5ex">複数のファイルを一括でアップロードします</div>',
            '<table class="edit config">',
            '<tbody><tr><th>画像・動画</th><td><input type="file" multiple></td></tr>',
            '<tr><th>タイトル</th><td>',
            '<input class="fototitle" size="32" type="text">',
            '<br><label>',
            '<input class="use_filename" type="checkbox">',
            'タイトルにファイル名を使う',
            '</label>',
            '</td></tr>',
            '</tbody></table>',
        ].join("");
    
        file_block.parentNode.insertBefore(new_block, file_block);
    
        removeNode(form.querySelector("div.upload-submit"));
        removeNode(file_block);
    
        new_block.querySelector("input[type=\"checkbox\"]").onchange = function() {
            this.parentNode.previousSibling.previousSibling.disabled = this.checked;
        };
    
        new_block.querySelector("input[type=\"file\"]").onchange = function() {
            var form = this.form;
            var files = this.files;
            removeNode(this);   // 消しておかないと、二重にアップロードしちゃう
    
            var title = new_block.querySelector("input[type=\"text\"]");
            var use_filename_as_title = new_block.querySelector("input[type=\"checkbox\"]").checked;
    
            var upload_index = 0;
            function upload() {
                var form_data = new FormData(form);
    
                /*
                    fotolife の通常アップロードは 10個までしかファイルを受け付けない
                */
                for (var i = 0  ; i < 10 && upload_index < files.length ; ++i, ++upload_index) {
                    var f = files[upload_index];
                    var n = i + 1;
                    form_data.append("image" + n, f);
                    var name = use_filename_as_title ? f.name : title.value;
                    form_data.append("fototitle" + n, name);
                }
    
                var upload_url = form.action;
                var xhr = new XMLHttpRequest();
                xhr.onload = function(e){
                    if (upload_index < files.length) {
                        upload();
                    } else {
                        /*
                            編集ページに遷移する
                            本来は、f.hatena.ne.jp/my/up が 302 で返ってきて、edit ページに移動する
                        */
                        var opts = form.querySelector("select[name=\"folder\"]");
                        var folder = opts[opts.selectedIndex];
                        var matches = /(.*\/)up/.exec(upload_url);
                        if (matches) {
                            document.location.href = matches[1] + "edit?folder=" + encodeURI(folder.value); 
                        }
                    }
                };
                xhr.open("POST", upload_url, true);
                xhr.send(form_data);
    
                var label = new_block.querySelector("div.label");
                label.style.color = "red";
                label.innerHTML = "アップロードしています... (" + (upload_index-9) + " - " + upload_index + " / " + files.length + ")";
            }
    
            upload();
    
        };
    }());
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2016/01/31 12:38:36 - 2016-01-31
  2. 2016/01/31 12:36:05 - 2016-01-31
  3. 2016/01/31 11:30:30 - 2016-01-31
  4. 2016/01/30 23:28:08 - 2016-01-30