[Perl][Javascript]ファイルをドラッグ&ドロップでサーバにアップロードする

ファイルをドラッグ&ドロップしてサーバにアップロードする方法がやっとわかりました。
肝は以下のところです。

function uploadFile(file){
var formData = new FormData();
formData.append('file', file);
$.ajax({
  async: true,
  type: 'POST',
  contentType: false,
  processData: false,
  url: 'dndtest.cgi',
    data: formData,
    dataType :'html'
}).done(function(){});

ファイルをドラッグ&ドロップしてファイル名などを取得する方法は結構ネットにあがっていますけど、実際にそのファイルをサーバにアップロードする方法を解説するサイトがなく、苦労しました。

FormDataを使う。
ajaxでPOSTする。

ファイルをアップロードする箇所は以下の通りです。

my $q = new CGI;
my @fps = $q->upload('file');
my @fnames = $q->param('file');
my $idx = 0;
foreach my $fname(@fnames){
    $fname = basename($fname);
    copy($fps[$idx], "./test/$fname");
    $idx++;
}

$q->upload()を使うということになかなか気づきませんでした。

以下がソースです。複数ファイルのドラッグ&ドロップにも対応しています。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my @fps = $q->upload('file');
my @fnames = $q->param('file');
my $idx = 0;
foreach my $fname(@fnames){
    $fname = basename($fname);
    copy($fps[$idx], "./test/$fname");
    $idx++;
}
my $out = <
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-1.12.4.js">
<script type="text/javascript">
    function PageLoad(e) {
        var dropFrame = document.getElementById('DropFrame');
        dropFrame.addEventListener('dragover', onDragOver, false);
        dropFrame.addEventListener('drop', onDrop, false);
    }
    function onDragOver(e){
        e.preventDefault();
    }
    
    function onDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        
        var files = e.dataTransfer.files; 
        
        for(var i = 0; i 
</head>
EOM
print(encode('UTF-8', $out)) or die($!);
$out = <
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />@fnames</div>
EOM
print(encode('UTF-8', $out)) or die($!);
$out = <
    $(function(){
        PageLoad();
    });
</script>
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);

合わせて読みたい

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル