Skip to main content
本文に 351 文字追加
ソース リンク
MaFeng Ling
  • 57
  • 1
  • 6
  • 17

・2018.1.26 追記。
以下のコードでファイルをアップロードすることができました。
ありがとうございます。

一つ質問があります。
複数ファイルのドラッグ&ドロップの実装はどうしたらいいでしょうか?
@files = $q->param('file');
で複数のファイル名を取得できますが、
$fp = $q->upload('file')
は1ファイルだけの気が…。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files$fp = $q->;upload('file');
my @fnames = $q->;param('file');
foreach my $fname(@fnames){
    $fname = basename($fname);
    copy($fp, "./test/$fname");
}
my $out = <<;"EOM";;'EOM';
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function PageLoad(e) {
        alert("hoge");
        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; 
        
        uploadFile(files[0]);
    }
    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(){});
    }
</script>
</head>
<body>
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
<script type="text/javascript">
    $(function(){
        PageLoad();
    });
</script>\
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);
#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files = $q->param('file');

my $out = <<;"EOM";
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function PageLoad(e) {
        alert("hoge");
        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; 
        
        uploadFile(files[0]);
    }
    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(){});
    }
</script>
</head>
<body>
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
<script type="text/javascript">
    $(function(){
        PageLoad();
    });
</script>\
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);

・2018.1.26 追記。
以下のコードでファイルをアップロードすることができました。
ありがとうございます。

一つ質問があります。
複数ファイルのドラッグ&ドロップの実装はどうしたらいいでしょうか?
@files = $q->param('file');
で複数のファイル名を取得できますが、
$fp = $q->upload('file')
は1ファイルだけの気が…。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $fp = $q->;upload('file');
my @fnames = $q->;param('file');
foreach my $fname(@fnames){
    $fname = basename($fname);
    copy($fp, "./test/$fname");
}
my $out = <<;'EOM';
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function PageLoad(e) {
        alert("hoge");
        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; 
        
        uploadFile(files[0]);
    }
    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(){});
    }
</script>
</head>
<body>
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
<script type="text/javascript">
    $(function(){
        PageLoad();
    });
</script>\
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);
指摘を受けての修正
ソース リンク
MaFeng Ling
  • 57
  • 1
  • 6
  • 17

・2018.1.24 追記
いただいた追記を元に修正したのですが、今度は onload 自体動いていないようです。デフォルトの挙動をします。
変更点は、
・<script src="http://code.jquery.com/jquery-1.12.4.js"></script> を追加
・'PUT' → 'POST' に
・<body>タグの最後で
<script type="text/javascript">
$(function(){
PageLoad();
});
</script>
です。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files = $q->param('file');

my $out = <<"EOM";
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function PageLoad(e) {
        alert("hoge");
        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; 
        
        uploadFile(files[0]);
    }
    function uploadFile(file){
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            async: true,
            type: 'PUT'POST',
            contentType: false,
            processData: false,
            url: 'dndtest.cgi',
            data: formData,
            dataType :'html'
        }).done(function(){});
    }
</script>
</head>
<body onload="PageLoad();">>;
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>;
<script type="text/javascript">
    $(function(){
        PageLoad();
    });
</script>\
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);
#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files = $q->param('file');

my $out = <<"EOM";
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<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; 
        
        uploadFile(files[0]);
    }
    function uploadFile(file){
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            async: true,
            type: 'PUT',
            contentType: false,
            processData: false,
            url: 'dndtest.cgi',
            data: formData,
            dataType :'html'
        }).done(function(){});
    }
</script>
</head>
<body onload="PageLoad();">;
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);

・2018.1.24 追記
いただいた追記を元に修正したのですが、今度は onload 自体動いていないようです。デフォルトの挙動をします。
変更点は、
・<script src="http://code.jquery.com/jquery-1.12.4.js"></script> を追加
・'PUT' → 'POST' に
・<body>タグの最後で
<script type="text/javascript">
$(function(){
PageLoad();
});
</script>
です。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files = $q->param('file');

my $out = <<"EOM";
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function PageLoad(e) {
        alert("hoge");
        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; 
        
        uploadFile(files[0]);
    }
    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(){});
    }
</script>
</head>
<body>;
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>;
<script type="text/javascript">
    $(function(){
        PageLoad();
    });
</script>\
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);
回答を受けての追記
ソース リンク
MaFeng Ling
  • 57
  • 1
  • 6
  • 17

・2018.1.22 追記
ご回答ありがとうございます。プログラムを修正したのですが、動きません。
とりあえず、ファイルのアップロード機能は省いて、取得したファイル名をレスポンスに表示してみようと思ったのですが…。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files = $q->param('file');

my $out = <<"EOM";
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<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; 
        
        uploadFile(files[0]);
    }
    function uploadFile(file){
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            async: true,
            type: 'PUT',
            contentType: false,
            processData: false,
            url: 'dndtest.cgi',
            data: formData,
            dataType :'html'
        }).done(function(){});
    }
</script>
</head>
<body onload="PageLoad();">
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);

所々にalert()を入れて動作確認したところ、どこでも表示されたので、Syntax Errorはないと思います。
ドラッグエリアにファイルをドロップしたときは、そのファイルが直接ブラウザに表示されるデフォルトの挙動はしないので、イベントのフックはできていると思います。
プログラムの最後の方の$filesが空文字のままです。
POST先のurlを http://www.google.co.jp/ に変えても、ドラッグ&ドロップで移動しません。

初歩的な部分で躓いていると思います。
どうかよろしくお願いいたします。

・2018.1.22 追記
ご回答ありがとうございます。プログラムを修正したのですが、動きません。
とりあえず、ファイルのアップロード機能は省いて、取得したファイル名をレスポンスに表示してみようと思ったのですが…。

#!/usr/bin/perl
use strict;
use utf8;
use CGI;
use URI::Escape;
use File::Basename;
use File::Copy;
use File::Path;
use Encode;
use FindBin;

my $q = new CGI;
my $files = $q->param('file');

my $out = <<"EOM";
Content-type: text/html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<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; 
        
        uploadFile(files[0]);
    }
    function uploadFile(file){
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            async: true,
            type: 'PUT',
            contentType: false,
            processData: false,
            url: 'dndtest.cgi',
            data: formData,
            dataType :'html'
        }).done(function(){});
    }
</script>
</head>
<body onload="PageLoad();">
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
</body>
</html>
EOM
print(encode('UTF-8', $out)) or die($!);

所々にalert()を入れて動作確認したところ、どこでも表示されたので、Syntax Errorはないと思います。
ドラッグエリアにファイルをドロップしたときは、そのファイルが直接ブラウザに表示されるデフォルトの挙動はしないので、イベントのフックはできていると思います。
プログラムの最後の方の$filesが空文字のままです。
POST先のurlを http://www.google.co.jp/ に変えても、ドラッグ&ドロップで移動しません。

初歩的な部分で躓いていると思います。
どうかよろしくお願いいたします。

ソース リンク
MaFeng Ling
  • 57
  • 1
  • 6
  • 17
読み込んでいます