画像アップロード

WindowsエクスプローラーやFinderからファイルをドラッグ＆ドロップすると、サーバーにアップロードする。

＊ファイルは１つずつドロップすること。

＊ 画像ファイルサイズは、最大25kb程度です。

通信方法の都合上、通信データサイズは25kbの画像で60kb程度になります。

サンプル

コード

Javascript
----------------------------
// XHRライブラリとしてDabtenを使用
// http://dabten.wi-wi.jp/

function EI(id){return document.getElementById(id);}

onload=function(){

	EI('input').addEventListener('dragover', ImgDragover, true);
	EI('input').addEventListener('drop', ImgDrop, true);

	return true;
};//onload


/************/
function ImgDragover(e) {
	e.stopPropagation();
	e.preventDefault();
}

var gImgName;
var gImgType;
function ImgDrop(e){
	e.stopPropagation();
	e.preventDefault();
	var dt = e.dataTransfer;
	var files = dt.files;

	if(files.length == 0){
		alert('no files');
		return true;
	}
	
	var file;
	var fReader = new FileReader();
	fReader.onloadend = function(e) {
		var reader=e.target;
		var postdata=[
			{name: 'mode', data: 'upload'},
			{name: 'fileupload', data: reader.result, contentType: gImgType, filename: gImgName}
		];
		Dabten.Net.Load('upload.cgi', callback,
			{postData: postdata, method:'POST', enctype:'multipart/form-data'});
	};

	for(var i=0;file=files[i];i++){
		gImgName=file.name;
		gImgType=file.type;
		fReader.readAsBinaryString(file);
	}

}//

function callback(o){

	var img=new Image();
	img.src=o.client.responseText; //return "path/filename"
	imgs.push(img);
	EI('output').appendChild(img);
}




==========================
Perl-CGI
----------------------------
#!/usr/bin/perl
use CGI;

my $cgi=CGI->new;

print $cgi->header(-charset=>'UTF-8');

my $fileupload;
my $fname;
my $localname;
	
$fileupload = $cgi->param('fileupload');
$localname=$fileupload; # localでのファイル名

open(FP,">image.jpg") or die("cannot create file");

# javascriptでescape()されているので、そのまま保存しても画像データにならない
my $filedata;
while(<$fileupload>) {
    $filedata.=$_;
}
$filedata=~s/%([a-fA-F0-9]{2})/pack("C",hex($1))/eg; # javascriptのunescape()に相当

print FP $filedata;

close FP;
close $fileupload;

print $fname.'?localname='.$localname; # xhr.responseText