Skip to main content
10 / 12
本文に 6 文字追加
yyz
  • 1,847
  • 1
  • 9
  • 7

FormData オブジェクトを使うと良いかと

ファイルのアップロードについて、formの<input type = "file">を使ってのアップロードはできています。

サーバ側は動いているようなので、perlのコードはそのまま使えると思います、url: 'f.php' をperlのURLに変更してください。
(サンプルコードは、エラー処理とか複数ファイルのuploadは考慮していません。)

    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
    
        var files = e.dataTransfer.files;
    
        fup(files[0]);
    }
    function fup(file) {
        var formData = new FormData();
        formData.append('file', file);

//javascriptだけなら
//        var up = new XMLHttpRequest();
//        up.open("POST", "f.php", true);
//        up.send(formData);

//jqueryを使っているなら
        $.ajax({
            async: true,
            type: 'POST',
            contentType: false,
            processData: false,
            url: 'f.php',
            data: formData,
            dataType :'html'
        }).done(function(){});
    }

追記
jqueryを使うなら、
読み込み<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
の追加と  <body onload="PageLoad();">  のonloadを削除して

$(function(){
    PageLoad();
});

に変更しましょう。

追記2

var formData = new FormData();
formData.append('file', file);

は,動的に

<input name='file' value=file>
を作っています。

$q->param(name)のnameは、<input name=のnameで指定された名前をセットしなければならないので、formData.appendで指定したname値にあわせないと値を受け取れません。

jquery $.ajax 動作確認用 perl v5.8 サンプル(PHPerの自分のために追記)

#!/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<br>';
    exit;
}

my $fp = $q->upload('file');

#ファイルの存在の確認
my $fname = basename($q->param('file'));
if ($fname eq "./"){
    print 'file error<br>';
    exit;
}

copy ($fp, "./test/file/$fname");
undef $q;

print "ok upload!";

exit;

<!DOCTYPE html>
<html lang="en">
<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;

            uploadFile(files[0]);
        }
        function uploadFile(file){
            var formData = new FormData();
            formData.append('file', file);
            $.ajax({
                async: true,
                type: 'POST',
                contentType: false,
                processData: false,
                url: 'uptest.cgi',
                data: formData,
                dataType :'html'
            }).done(function(html){
                alert(html);
            });
        }
        $(function(){
            PageLoad();
        });
    </script>
</head>
<body>
    <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。<br />$files</div>
</body>
</html>

yyz
  • 1,847
  • 1
  • 9
  • 7