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

スポンサーサイト

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

JavaScriptを使って複数の画像ファイルをポストする

                
tags:
Post some JPEG files with JavaScript XMLHttpRequest

サーバー(GoogleAppEngine, Python2.5)


FileReader()を使えば、ローカルファイルをブラウザに読み込むことができる。そしてformのenctypeをmultipart/form-dataにすれば複数のファイルを読み込める。

今回やることは2つ。Javascriptで複数の画像データを送ること。サーバ側でそれを受け取って保存すること。今回はクライアントから文字列にエンコードされた画像データを送り、サーバ側でそれをデコードして保存した。

POSTする文のbodyはリンク参照。http://elicon.blog57.fc2.com/blog-entry-106.html
function sendRequest() {
if (!FILES.length) return false;
var req = new XMLHttpRequest();
if (!req) return;
var method = "POST";
req.open(method,"/add00",true);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
req.setRequestHeader('Content-type','multipart/form-data; boundary=---bndry');

var boundary = "---bndry";
var post_data = "";
var title = "title";
var location = "location";
var tookdate = "tookdate";
var filename = "filename";
var data = {"title":title, "location":location, "tookdate":tookdate, "filename":filename};
for(var key in data){
post_data += "--" + boundary + "\n" +
'Content-Disposition: form-data; name="' + key + '"\n\n' +
data[key] + "\n";
}

var file = "";
while (FILES.length){
file = FILES.shift();
post_data += "--" + boundary + "\n" +
'Content-Disposition: form-data; name="photo[]"; filename="foo.jpg"\n' +
'Content-Type: image/jpeg\n\n' +
file + '\n';
}
post_data += '--' + boundary + '--';
req.send(post_data);
}



def post(self):
title = self.request.get('title')
location = self.request.get('location')
uppeddate = datetime.datetime.now() + datetime.timedelta(hours=9)
tookdate = self.request.get('tookdate')
for file_data in self.request.POST.getall('photo[]'):
entry = Entry()
entry.id = current_user.user_id()
entry.title = title
entry.location = location
entry.uppeddate = uppeddate
entry.tookdate = tookdate
img = file_data.value
#正規表現でエンコードされたデータを抜きだし、バイナリデータにデコードする
imgb64 = re.match(r'data:image/jpeg;base64,(.*)$', img).group(1)
if imgb64 is not None and len(imgb64) > 0:
photo = base64.b64decode(imgb64)
image = images.Image(photo)
entry.photo = images.resize(photo, 1024, 1024, output_encoding=images.JPEG)\
if (image.width>1024 or image.height>1024)\
else photo
entry.thumbnail = images.resize(photo, 240, 240, output_encoding=images.JPEG)\
if (image.width>240 or image.height>240)\
else photo
entry.name = file_data.filename
entry.put()
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

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

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