2018年1月 – ぽこログ tech

2018-01-30

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

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

2018-01-14

[Perl] ディレクトリを再帰的にたどってファイルをコピーする

#!/usr/bin/perl
use strict;
use File::Copy;

my $srcFile = $ARGV[0]; # コピーするファイル名を取得
print "src file : $srcFile\n";

# 再帰コピー関数
sub recurseCopy{
	my($src, $dir) = @_;
	my @files = ();
	
	print "entering $dir\n";
	
	# カレントディレクトリのディレクトリ・ファイルを取得
	opendir(DIR, $dir) or die("Can not open directory : $dir\n");
	@files = readdir(DIR);
	closedir(DIR);
	
	foreach my $file(sort @files){
		next if($file =~ /^\.{1,2}$/);
		if(-d "$dir/$file"){
			# ディレクトリの場合、再帰コピー呼び出し
			recurseCopy($srcFile, "$dir/$file");
		}
	}
	print "copying $src to $dir\n";
	# 自分自身にはコピーしない
	if($dir ne "\."){
		copy($srcFile, $dir);
	}
}
print "start\n";
my $b = recurseCopy($srcFile, ".");
print "end\n";

2018-01-08

2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法

手軽にウェブサイトをレスポンシブウェブデザイン(iPhoneなどのスマホに対応)にする方法です。

右側にメインコンテンツ部、左側にサイドメニューがある一般的なデザインで、スマホで見るとサイドメニューをメインコンテンツの下に表示するようにします。
スマホの判別は

@media screen and (max-width: 48em),screen and (max-device-width:480px)

でやります。
ホントは画面サイズによっていろんな要素の最大幅・最小幅を設定した方がいいのですが、とりあえずこれで80%対応できます。
凝りだすとたいへんなんですよね～。だから費用対効果のいいところでやめます。(笑)
“2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法” の続きを読む