主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: 複数のバイナリデータをArrayBufferを使ってポストする

                
tags: JavaScript
JavaScript: 複数のバイナリデータファイルを加工してポストする

 前回に複数のバイナリデータを、ArrayBufferを使ってまとめてポストした。今回は前回のものを引き継ぎつつ、ポストの仕方を改善したい。ポスト時にまとめるデータを、ファイル数制限でなく容量制限にしたい。というわけでそんなことに使うオブジェクトを書いた。
PostPacker.js

ポストされるデータは以下のようになる。
["FILES"] [[バイナリデータの長さ+4(4バイト):バイナリデータ] × n]

まず制限容量(MB単位で指定)とURLを渡してインスタンスを作成する。あとはメソッドpackDataにデータ(Uint8Array)と、ポスト後に実行したい関数を渡していく。データを渡したときに制限容量に達すれば、それまでのデータがまとめてポストされる。finishメソッドで制限容量に達していなくても強制ポスト。
var pack = new PostPack(3, "/upload");
for (var x=0; x<filesUint8.length; x++)
{
pack.packData(filesUint8[x], false);
}
pack.finish(false);


Demo
フォームに"noname"と入れて認証を済ませたあと、Upload Pictureへ進む。
https://the-breast-ripper.appspot.com/html/auth.html
GoogleAppEngineを使ったイメージアップローダについて
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="/styles/template.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/js/jpg.js"></script>
<script src="/js/MinifyJpeg.js"></script>
<script src="/js/PostPacker.js"></script>
</head>
<body>
<a href="/look/0">Look Pictures</a><br><br>
<div id="up">読み込みファイルはJPEGのみ<br>一度に複数のファイルを選択できます<br></div>
<div id="shori"></div>
<script>
var processedFiles = [];
var pack = new PostPacker(5, "/resize");

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var fileArray = [];
for (var x=0; x<files.length ; x++)
{
fileArray.push(files[x]);
}
handleFiles(fileArray);
}

function handleFiles(fileArray)
{
while (1)
{
if (fileArray.length == 0)
{
pack.finish(function(){$("#keika").html("アップロード完了");});
return;
}
else if (fileArray[0].type.match('image/jpeg.*'))
{
break;
}
else
{
fileArray.shift(0);
}
}
var f = fileArray.shift(0);
$("#keika").html("Left: " + (fileArray.length + 1))
var reader = new FileReader();

// Closure to capture the file information.
reader.onloadend = (function(theFile)
{
return function(e)
{
if (processedFiles.indexOf(theFile.name) < 0)
{
processedFiles.push(theFile.name);
var num = processedFiles.length;
$("#shori").prepend('<div id="load' + num + '">loading: ' + theFile.name + '</div>');
var minified = MinifyJpeg.minify(e.target.result, 1524);
pack.packData(minified, function(){addUploadedImage(minified, num, theFile.name);});
}
else
{
//
}
handleFiles(fileArray);
};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}

function addUploadedImage(data, num, name)
{
var enc = "data:image/jpeg;base64," + MinifyJpeg.encode64(data);
var html = '<br><div id="s' + num + '"><img src="' + enc + '" width="150"><br>' +
'Uploaded: ' + name + '</div><br>';
$('#load' + num).html(html);
}

window.onload = function(){
if (typeof(FileReader) == "function")
{
var html = '<input type="file" id="files" class="form" name="files[]" multiple /><br>' +
'<div id="keika"><div>'
$('#up').append(html);
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}
else
{
var html = '<form action="/up" method="post" enctype="multipart/form-data">' +
'<fieldset><legend>写真を追加</legend>' +
'<input type="file" name="photo[]" multiple/><br>' +
'<input type = "submit" value="写真を送る">' +
'</fieldset></form><br><br>'
$('#up').append(html)
}
}
</script>
</body>
</html>
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。