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

by a-kuma3 2016-01-31 [2016/01/31 12:38:36]

64bit 版 Firefox だと Flash の一括アップロードが動かないので、その補完のつもりです。Flash を使わない画像のアップロード画面で使ってください。

@@ -13,33 +13,39 @@
     var form = document.querySelector("form#upload");
     var file_block = form.querySelector("div#upload-form");
 
-    var label = document.createElement("div");
-    label.innerHTML = "複数のファイルを一括でアップロードします（10個まで）";
-    label.style.margin = "1em 0.5ex";
-    file_block.parentNode.insertBefore(label, file_block);
-
-    var inp = document.createElement("input");
-    inp.type = "file";
-    inp.multiple = true;
-    file_block.parentNode.insertBefore(inp, file_block);
+    var new_block = document.createElement("div");
+    new_block.style.width = "330px";
+    new_block.innerHTML = [
+        '<div class="label" style="margin: 1em 0.5ex">複数のファイルを一括でアップロードします（10個まで）</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>',
+        '</tbody></table>',
+    ].join("");
+
+    file_block.parentNode.insertBefore(new_block, file_block);
 
     removeNode(form.querySelector("div.upload-submit"));
     removeNode(file_block);
 
-    inp.onchange = function() {
+    new_block.querySelector("input[type=\"file\"]").onchange = function() {
         if (this.files.length > 10) {
             alert("同時にアップロードできるのは10個までです！");
             return;
         }
+
         var form = this.form;
+        this.parentNode.removeChild(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 = this.form.action;
+        var upload_url = form.action;
         var xhr = new XMLHttpRequest();
         xhr.onload = function(e){
             var opts = form.querySelector("select[name=\"folder\"]");
@@ -52,6 +58,7 @@
         xhr.open("POST", upload_url);
         xhr.send(form_data);
 
+        var label = new_block.querySelector("div.label");
         label.style.color = "red";
         label.innerHTML = "アップロードしています...";
     };

• /*
   * @title フォトライフ一括アップロード
   * @description 64bit 版 Firefox だと Flash の一括アップロードが動かないので、その補完のつもりです。
   * @include http://f.hatena.ne.jp/my/up
   * @license MIT License
   * @javascript_url
   */
  (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">複数のファイルを一括でアップロードします（10個まで）</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>',
          '</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=\"file\"]").onchange = function() {
          if (this.files.length > 10) {
              alert("同時にアップロードできるのは10個までです！");
              return;
          }
  
          var form = this.form;
          this.parentNode.removeChild(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); 
              }
          };
          xhr.open("POST", upload_url);
          xhr.send(form_data);
  
          var label = new_block.querySelector("div.label");
          label.style.color = "red";
          label.innerHTML = "アップロードしています...";
      };
  }());
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。