0

javascript を使用して filepicker.io の「ドラッグ アンド ドロップ ペイン」を動作させるのに問題があります。私はすでに filepicker.io html ウィジェットを次のように動作させていました:

<input type="filepicker-dragdrop" data-fp-drag-class="filepicker_dragdrop"/>

ただし、JavaScript から filepicker.io を呼び出すのに問題があります。ファイルを「div.filepicker_dragdrop」コンテナにドラッグしても、何も起こりません。何かご意見は？

私のフォームで.html.erb：

<div class="filepicker_dragdrop"></div>

私の .css ファイルで:

.filepicker_dragdrop {
  padding: 8px;
  height: 100px;
  width: 100%;
  text-align: center;
  margin: auto;
  border: 1px dashed #aaa;
  border-radius: 5px;
  background-color: #fff;
}

私のfilepicker_dragdrop.jsでは：

filepicker.makeDropPane($('.filepicker_dragdrop')[0], {
    multiple: true,
    dragEnter: function() {
        $(".filepicker_dragdrop").html("Drop to upload").css({
            'backgroundColor': "#E0E0E0",
            'border': "1px solid #000"
        });
    },
    dragLeave: function() {
        $(".filepicker_dragdrop").html("Drop files here").css({
            'backgroundColor': "#F6F6F6",
            'border': "1px dashed #666"
        });
    },
    onSuccess: function(fpfiles) {
        $(".filepicker_dragdrop").text("Done, see result below");
        $("#localDropResult").text(JSON.stringify(fpfiles));
    },
    onError: function(type, message) {
        $("#localDropResult").text('('+type+') '+ message);
    },
    onProgress: function(percentage) {
        $(".filepicker_dragdrop").text("Uploading ("+percentage+"%)");
    }
});
4

1 に答える 1

0

古い質問ですが、それでも噛まれました。ドキュメントがロードされた後、必ず makeDropPane 関数を呼び出してください!

于 2013-05-18T02:04:32.053 に答える