【Perl】動的に<input type="file">を増やし、複数ファイルをサーバにアップロードする

なぜmultiple属性を使わないのか？

HTML5を日頃から使用している方なら複数ファイルアップロードを実装する場合、multiple属性を使うことを真っ先に思いつくと思いますが、今回はあえてmultiple属性を使用せずに、一つファイル選択が終了したらまた真下に次のタグを増やしていくようにしました。というのも、クライアント端末のブラウザのバージョンが古く、HTML5に対応していないからという業務上の都合です。

前提条件

-サーバにPerlをインストールしていること
-jqueryをサーバ上に配置していること

機能

-動的にタグを増やし、複数ファイルアップロードができる。
-タグに個数制限を設ける。

フロント側処理

uploadform.cgi

#!/usr/bin/perl
#アップロードフォーム
#メイン

&disp

#画面部HTML
sub disp{
print <<EOM;
    <form action="upload.cgi" method="post" enctype="multipart/form-data">
        ■アップロード
        <ul id="filelist">
            <li><input type='file' name='uploadfile[]' maxlength='1'  size='155' class='fileinput' accept='csv'  /></li>
        </ul>
        <p><input type="submit" value="アップロード" style= " position: relative; left: 800px; top:0px;" class="$buttonstyle" /></p>
    </form>
EOM
}

#スクリプトルーチン
sub check_js{

print <<EOM;
    <SCRIPT language="JavaScript" src="/hogehoge/jquery-1.12.4.min.js"></SCRIPT>    
    <script>
    var cnt = 0; //カウンタ変数
    const max = 100; //アップロード上限数
    /*アップロードフォームにファイルが選択されたら下にアップロードフォームを追加する*/
    \$\("document").ready(function(){
    \$\(".fileinput").change(fileInputChange);
    });
    function fileInputChange(){
        if(cnt < max ){
            if(\$\(".fileinput").last().val() != ""){
                \$\("#filelist").append('<li><input type="file" name="uploadfile[]" maxlength="1"  size="155" class="fileinput" accept="text/comma-separated-values" /></li>')
                .bind('change', fileInputChange);
                cnt++;      
            }else{
                setTimeout("fileInputChange()", 3000);
            }
        }           
    }
    </script>       
EOM
}

サーバ側処理

upload.cgi

#!/usr/bin/perl

#リダイレクトする
print "Location: /hogehoge/uploadform.cgi/\n\n";

use CGI;
$CGI::POST_MAX = 1024 *1024 *10;
my $form = new CGI;

#複数のアップロードファイルを配列に挿入
my @uploadfile = $form->param("uploadfile[]");

# ファイルを保存する。
foreach my $upfiles(@uploadfile){
    @newfile = split /\\/, $upfiles;
    $newfile = pop @newfile;
    open (OUTFILE,">/home/foo/upload/$newfile") or die "Can't make serverside file!\n";
    while ($bytesread = read($upfiles,$buffer,1024)) {
        print OUTFILE $buffer;
    }
}
close OUTFILE;

あとがき

サーバ側の処理はmultiple属性を使用しても変わりません。
ここまで読んだならお気づきかと思いますが、まごうことなきウンコードです。
使用可能なら素直にmultiple属性を使おう！
フロントエンド側はこちらのサイトを参考にさせていただきました。
サーバ側はこちらのサイトを参考にさせていただきました。