WEBプログラム色々

  • 小ネタ、ちょっとした確認

AjaxとPerlCGIを利用したファイルアップロード＆保存のテスト

2020-08-03

  • 環境
    • Ubuntu 18.04
    • Apache2: 2.4.29
    • Perl: v5.26.1
  • upload.html [644] 
    <html>
 
<!--
----------------------------------------------------------------------------
    AjaxとPerlCGIを利用したファイルアップロード＆保存のテスト
 
    2020-08-03
----------------------------------------------------------------------------
 
参考
  https://qiita.com/yasumodev/items/cffb735f46ffd489a4db
 
ディレクトリ構成例
  public_html  /  upload.html [644] (このファイル)
       |          upload.cgi  [755]
      save     /              [777] アップロードファイル保存用ディレクトリ 
-->
 
<body>
<script
	src="https://code.jquery.com/jquery-3.5.1.js"
	integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
	crossorigin="anonymous"></script>
 
 
<form id="my_form">
	<input type="file" name="file_1">
	<button type="button" onclick="file_upload()">upload</button>
</form>
 
<div id="result"></div>
 
<script>
 
function file_upload()
{
	// 結果の表示をリセット
	$("#result").html("");
 
	// フォームデータを取得
	var formdata = new FormData($('#my_form').get(0));
 
	// POSTでアップロード
	$.ajax({
		url  : "./upload.cgi",
		type : "POST",
		data : formdata,
		cache       : false,
		contentType : false,
		processData : false,
		dataType    : "html"
	})
	.done(function(data, textStatus, jqXHR){
		//alert(data);
		$("#result").html(data);
	})
	.fail(function(jqXHR, textStatus, errorThrown){
		alert("fail");
	});
}
 
</script>
</body>
</html>


  • upload.cgi [755] 
    #!/usr/bin/perl
 
# 参考
# 
# http://www.searchai.jp/lesson/perl.php?page=17
 
use CGI;
$query = new CGI;
 
$filename = $query->param('file_1');
while($bytesread = read($filename, $buffer, 2048)) {
  $file .= $buffer;
}
 
open(OUT, "> ./save/$filename") or die("error: $filename :$!");
binmode(OUT);
print(OUT $file);
close(OUT);
chmod 0666, "./save/$filename";
 
 
print "Content-type: text/html\n\n";
print "done: $filename → ";
print "<a href='./save/$filename' target='_blank'>View</a>";