インデックステンプレートで手っ取り早く複数ファイルアップローダーを作っちゃおう

タイトルの通りですが、プラグイン無しで、とりあえず複数ファイルアップローダーを使いたい人のためのインデックステンプレートです。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行目を編集しましょう。

使い終わったらこのテンプレートは非公開にしておきましょうね。

実際に使った様子は以下の通り。最後の方はカットして短くしてあります。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...