カテゴリー: 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(){});

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

1. FormDataを使う。
2. 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()を使うということになかなか気づきませんでした。

以下がソースです。複数ファイルのドラッグ&ドロップにも対応しています。
“[Perl][Javascript]ファイルをドラッグ&ドロップでサーバにアップロードする” の続きを読む