HTML(Javascript)とperlでドラッグ&ドロップでファイルをアップロードする最小スクリプト

カテゴリー:Perl・Javascript・python、サーバー管理メモ(記事数:74)



↑B


2020.10.29

HTML(Javascript)とperlでドラッグ&ドロップでファイルをアップロードする最小スクリプト

個人的メモ。スマホでは使えないのが残念。
HTML側↓※タグの<>を大文字で表記しております。


---------------------------------
<html><head><meta charset="UTF-8"><head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<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 < files.length;i++){uploadFile(files[i]);}
}
function uploadFile(file){
var formData = new FormData();
formData.append('file', file);
$.ajax({
async: true,
type: 'POST',
contentType: false,
processData: false,
url: 'drop.cgi',
data: formData,
dataType :'html'
}).done(function(html){
alert(html);
});
}
$(function(){
PageLoad();
});
</script></head>
<body>
<div id="DropFrame" style="border:solid 1px; width:360px; height:240px;">drop file here</div>
</body></html>
---------------------------------


Perlスクリプト「drop.cgi」側

---------------------------------
#!/usr/local/bin/perl
use File::Basename;
use File::Copy;
use CGI;

#転送最大サイズ
$CGI::POST_MAX = 1024 * 100000; #100MB
$q = new CGI;

print "Content-type: text/html\n\n";
binmode STDOUT;

if (!defined($filename) and $error = $q->cgi_error){
print 'file size error';
exit;
}
my $fp = $q->upload('file');
my $fname = basename($q->param('file'));
if ($fname eq "./"){
print 'file error';
exit;
}
copy ($fp, "./data/$fname");
undef $q;
print "ok upload!".$fname;
exit;
------------------------------------

HTML5とかでもっと簡単に出来るんだっけ?

  • アップロードの進捗をリアルタイム表示
  • 複数ファイル同時転送
出来るとなお良いんだけど。。。。。

Category:Perl・Javascript・python、サーバー管理メモ

 Keyword:Java/38



コメント

いいっすね!=1

名前 ↑B

コメント(※改行は省略されます)

※3回以上の連続書き込み不可
この記事のアクセス数: 本日の記事一覧に戻る


→カテゴリー:Perl・Javascript・python、サーバー管理メモ(記事数:74)
アクセス数の多い記事(過去1ヶ月)

すべて見る

Java