↑Ｂ

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＞
---------------------------------

---------------------------------
#!/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;
------------------------------------

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

　Keyword:Java/50

Follow @fetuin

コメント

いいっすね！=1

名前 ↑Ｂ

ツイート
コメント(※改行は省略されます）

※３回以上の連続書き込み不可