JavaScriptとPerlで、ファイルをドラッグ&ドロップしたらアップロード
JavaScriptとPerlで、ファイルをドラッグ&ドロップしたら、サーバにファイルをアップロードする仕組みを作りたいです。
「Ajaxを利用して複数画像をドラッグ&ドロップで一括アップロード」
http://qiita.com/uda0922/items/4e22908ce2acb3a28f29
などを見ながら作ってみたのですが、うまくいきません。無反応です。
Perlの該当関数
sub UploadFiles(){
my @files = $q->param('upload');
foreach my $file(@files){
my $tmp = $q->tmpFileName($file);
$file = basename($file);
my $path = ".";
my $newfile = "$path/$file";
copy($tmp, $newfile);
$newfile = decode('UTF-8', $newfile);
$err .= $newfile . "をアップロードしました。";
}
}
フォーム部分
<form name = "form" action = "./sfs.cgi" method = "POST" enctype = "multipart/form-data">
<p>
<input type = "file" name = "upload" size = "100" multiple />
<button type = "submit" name = "submit" value = "upload">アップロード</button>
</p>
</form>
JavaScript
<script type="text/javascript">
// File APIに対応していない場合はエリアを隠す
if (!window.File) {
document.getElementById('image_upload_section').style.display = "none";
}
// ブラウザ上でファイルを展開する挙動を抑止
function onDragOver(event) {
event.preventDefault();
}
// Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
function onDrop(event) {
// ブラウザ上でファイルを展開する挙動を抑止
event.preventDefault();
// ドロップされたファイルのfilesプロパティを参照
var files = event.dataTransfer.files;
for (var i=0; i<files.length; i++) {
// 一件ずつアップロード
imageFileUpload(files[i]);
}
}
// ファイルアップロード
function imageFileUpload(f) {
var formData = new FormData();
formData.append('image', f);
$.ajax({
type: 'POST',
contentType: false,
processData: false,
url: './sfs.cgi',
data: formData,
dataType: 'json',
success: function(data) {
alert("ok!");
}
});
}
</script>
有識者の方、ご教示いただけるとありがたいです。