Pocket
LINEで送る

デスクトップからブラウザにファイルをドロップできるようにしたい。

参考
Reading files in JavaScript using the File APIs
Drag and DropとFile APIを試す
はまちーのにっき。

File APIと、FormDataというのを使った。ちょっとごちゃごちゃしてるけど、dorpクラスにdorpされたファイルを、順番にupload関数に渡してアップロードしている。cakePHPで受け取ってFileBinderで保存しましたが、FormData使ってファイルを渡すと、$this->request->params[‘form’]に入っていた。dropされたらウインドウの下のに、ボックスが現れて、アップロード中のファイル名が表示されて、アップロード成功したら青くなって、失敗したら赤くなって、完了したらフェードアウトしてる様。$.Deferred()は、終わるまで次の処理を待たせたりできるやつらしいので、使ってみた。全てをしっかり理解していないので、効率的じゃなさそうだけど、とりあえずこれで出来た。

$(function(){
    jQuery.event.props.push('dataTransfer');

    $(document).on('drop', '.drop', function(evt){
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files;
        var url = $(this).attr('name');

        $.when(
            $.each(files, function(idx, file) {
                upload(url, idx, file);
            })
        ).done(function(){
            $('#popup').delay(2000).fadeOut('slow');
        });
    });

    $(document).on("dragenter", '.drop', false);
    $(document).on('dragover', '.drop', function(evt){
        $(this).css({'color':'#0000ff', 'width':'200px'});
        return false;
    });
    $(document).on('dragleave', '.drop', function(evt){
        $(this).css({'color' : '#000000', 'width':'130px'});
        return false;
    });
});

function upload(url, idx, file){
    var dfd = $.Deferred();
    fd = new FormData();
    fd.append('file',file);
    $.ajax({
        url: url,
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        beforeSend:function(){
            if($('#popup').length == 0){
                $('#container').append('<div id="popup" display="none"></div>');
            }else{
                if(! $('#popup span').is(':visible')){
                    $('#popup').empty().fadeIn('first');
                }
            }
            $('#popup').append('<span class="file_' + idx  + '">' + file.name + '<br></span>');
        },
        success:function(){
            $('.file_' + idx).css({'color':'#00ccff'});
        },
        error:function(){
            $('.file_' + idx).css({'color':'#ff3333'});
        },
        complete:function(){
            $('.file_' + idx).fadeOut('slow');
            setTimeout(function(){
                dfd.resolve();
            }, 2000);
        }
    });
    return dfd.promise();
}
Pocket
LINEで送る


コメントください

関連記事

プログラミング

cakePHP2 – 多言語化

多言語化します。 cakephpマニュアルのこのページに説明が書いてあ 続きを読む …

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

%d人のブロガーが「いいね」をつけました。