タイトルの通りですが、プラグイン無しで、とりあえず複数ファイルアップローダーを使いたい人のためのインデックステンプレートです。Data API を使うので Movable Type 6 限定です。 テンプレートは以下のとおり。これをインデックステンプレートで書き出して、そのページにアクセスすればOKです。出力されたページにアクセスすると、最初にログインを求められます。 <!doctype h...
タイトルの通りですが、プラグイン無しで、とりあえず複数ファイルアップローダーを使いたい人のためのインデックステンプレートです。Data API を使うので Movable Type 6 限定です。
テンプレートは以下のとおり。これをインデックステンプレートで書き出して、そのページにアクセスすればOKです。出力されたページにアクセスすると、最初にログインを求められます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi file uploader</title>
<style type="text/css">
body {
background-color: black;
font-family: 'Source Code Pro', Monaco, Consolas, 'Courier New', Courier, monospace;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Multi file uploader</h1>
<form id="itemUpload">
<p><input type="file" id="itemUploadFile" multiple></p>
<p><input id="itemUploadBtn" type="button" value="Upload" class="button"></p>
</form>
<div id="results"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<mt:StaticWebPath>data-api/v1/js/mt-data-api.min.js"></script>
<script type="text/javascript">
(function($){
var uploadDirImages = "upload/img";
var uploadDirFiles = "upload/file";
var api = new MT.DataAPI({
baseUrl: "<mt:CGIPath><mt:Var name= "config.DataAPIScript">",
clientId: "WBf8rxuf48"
});
var siteId = <mt:BlogId>;
var $results = $("#results");
api.getToken(function(response) {
if (response.error) {
if (response.error.code === 401) {
location.href = api.getAuthorizationUrl(location.href);
}
else {
alert("Error:" + response.error.message);
}
}
else {
$("#itemUploadBtn").on("click", function(){
var count = 0;
var l = document.getElementById("itemUploadFile").files.length;
for (var i = 0; i < l; i++) {
var fileObj = document.getElementById("itemUploadFile").files[i];
var data = {
file: fileObj,
path: "upload",
autoRenameIfExists: true,
normalizeOrientation: true
};
if (fileObj.type.indexOf("image") !== -1) {
data.path = uploadDirImages;
}
else {
data.path = uploadDirFiles;
}
api.uploadAsset(siteId, data, function(response) {
if (response.error) {
$results.append('<p style="font-weight:bold;color:red;">Error Code: ' + response.error.code + ':' + response.error.message + '</p>');
return;
}
count++;
$results.append('<p>' + response.filename + ' was uploaded![' + count + ']</p>');
});
}
});
}
});
})(jQuery);
</script>
</body>
</html>
インデックステンプレートで作る Multi file uploader(Data API 版)
アイテムはインデックステンプレートを作ったブログの配下にアップロードされ、そのブログのアイテムに登録されます。
アップロードしたアイテムが画像の場合は upload/img、それ以外の場合は upload/file に入ります。変更したい場合は、テンプレートの27、28行目を編集しましょう。
使い終わったらこのテンプレートは非公開にしておきましょうね。
実際に使った様子は以下の通り。最後の方はカットして短くしてあります。
以上です。