一覧へ   前へ<<  >>次へ


複数の写真のドラッグアンドドロップでのアップロード (2020年01月25日更新)

下調べ

最近のブラウザのバージョンでは、multiple という設定をすると複数ファイルを転送できるようになったそうです。

解説サイト
https://www.tagindex.com/html5/form/input_file.html


こちらのサイトのサンプルを試すと、うまくいきました。
https://favril.hatenablog.com/entry/20100428/1272474430


写真サイズの変更について
前項のサンプルのhtmlとcgiの組み合わせで複数の写真をサーバーに転送することができましたが、大きなサイズの写真を送ろうとすると時間もかかり、(たまたま?)ブラウザの動作も不安定に感じたので、

送信時のサイズを制限し、制限を超えた場合は解像度をさげるようの処理が必要そう。

検索したところ、下記サイトのものが使えそうなので、試してみます。

https://support.sugutsukaeru.jp/ja/tutorials/homepage-design/136.html


サンプル
複数のファイルを選択して転送し、Image::Magicを利用してサイズを半分にするサンプルです。

下のサンプルをそれぞれ、test.htmlと、save.cgi という名前で保存して2つのファイルを作り、サーバーに転送し、属性(cgiは755か766)を設定します。

sakuraのサーバはImage::Magicが設定されているのか、

 use Image::Magick;

と記載するだけでエラーも発生せずに、処理ができました。


以下は、test.htmlとして保存。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<form action="save.cgi" method="POST" enctype="multipart/form-data">
<input type="file" name="files" multiple />
<input type="submit" value="submit" />
</form>

</body>
</html>



以下は、save.cgiとして保存。

#!/usr/bin/perl

use strict;
use warnings;
use CGI;
use File::Copy;
use Image::Magick;

my $SAVE_DIR = './save_dir'; # 保存するディレクトリのパス

print "Content-Type: text/html\n\n\n";

print "転送実行中・・・";
my $q = CGI->new;
my @files = $q->param('files');
for my $filename (@files) {
copy($q->tmpFileName($filename), "$SAVE_DIR/$filename") or die $!;
print "$filename<BR>";

my $filename2 = "$SAVE_DIR/$filename"; #読み込むファイル名
my $image = Image::Magick->new;
$image->Read("$filename2");
my ($width, $height) = $image->Get('width', 'height'); #画像の幅、高さを取得する

$width = int($width / 2);
$height = int($height / 2);

print "$width,$height";

$image->Scale(width=>$width,height=>$height); #サイズを変更
#print ("Content-type: image/jpeg\n\n"); #表示する画像ヘッダー
binmode STDOUT;
$image->Write("$SAVE_DIR/$filename");

print "\n\n";
undef $image;

}

exit;