フォトライフ一括アップロード
by
a-kuma3
2016-01-31 [2016/01/31 12:38:36]
64bit 版 Firefox だと Flash の一括アップロードが動かないので、その補完のつもりです。Flash を使わない画像のアップロード画面で使ってください。
@@ -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 です。