

JavaScriptとPerlで、ファイルをドラッグ&ドロップしたら、サーバにファイルをアップロードする仕組みを作りたいです。

「Ajaxを利用して複数画像をドラッグ＆ドロップで一括アップロード」  
<http://qiita.com/uda0922/items/4e22908ce2acb3a28f29>

などを見ながら作ってみたのですが、うまくいきません。無反応です。

Perlの該当関数

[code]

    sub UploadFiles(){
        my @files = $q->param('upload');
        foreach my $file(@files){
            my $tmp = $q->tmpFileName($file);
            $file = basename($file);
            my $path = ".";
            my $newfile = "$path/$file";
            copy($tmp, $newfile);
            $newfile = decode('UTF-8', $newfile);
    
            $err .= $newfile . "をアップロードしました。";
        }
    }
    
[/code]

フォーム部分

[code]

    <form name = "form" action = "./sfs.cgi" method = "POST" enctype = "multipart/form-data">
    <p>
    <input type = "file" name = "upload" size = "100" multiple />
    <button type = "submit" name = "submit" value = "upload">アップロード</button>
    </p>
    </form>
    
[/code]

JavaScript

[code]

    <script type="text/javascript">
    // File APIに対応していない場合はエリアを隠す
    if (!window.File) {
        document.getElementById('image_upload_section').style.display = "none";
    }
    
    // ブラウザ上でファイルを展開する挙動を抑止
    function onDragOver(event) {
        event.preventDefault();
    }
    
    // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
    function onDrop(event) {
        // ブラウザ上でファイルを展開する挙動を抑止
        event.preventDefault();
    
        // ドロップされたファイルのfilesプロパティを参照
        var files = event.dataTransfer.files;
        for (var i=0; i<files.length; i++) {
            // 一件ずつアップロード
            imageFileUpload(files[i]);
        }
    }
    
    // ファイルアップロード
    function imageFileUpload(f) {
        var formData = new FormData();
        formData.append('image', f);
        $.ajax({
            type: 'POST',
            contentType: false,
            processData: false,
            url: './sfs.cgi',
            data: formData,
            dataType: 'json',
            success: function(data) {
                alert("ok!");
            }
        });
    }
    </script>
    
[/code]

有識者の方、ご教示いただけるとありがたいです。


CC BY-SA 3.0
2017-03-20T02:02:52.687
33415
2017-03-21T06:45:30.407
2017-03-20T02:08:28.183
9674
9674
question
javascript html5 perl
JavaScriptとPerlで、ファイルをドラッグ&ドロップしたらアップロード


コードを見た感じではたぶん現状では、ファイルをドラッグアンドドロップしてもそのファイルが開かれるだけかと思います。

サンプルと指定されているコードはAjaxでファイルをPOSTするプログラムのようなのでFormタグは不要ですね。  
ファイルをドロップするための領域をDIVなどで用意して、 その領域に対してイベントハンドラの「ondragover="onDragOver(event)"
ondrop="onDrop(event)"」をサンプルの通りに設定してあげてください。  
見た感じではこれで動くと思います。

ファイルをドラッグアンドドロップしてもそのイベントを受け取るようにイベントハンドラが設定されていないのが原因でしょう。


CC BY-SA 3.0
2017-03-21T06:45:30.407
33436
2017-03-21T06:45:30.407
17014
33415
answer